<template>
|
<div>
|
<el-form :inline="true" :model="dataForm" @keyup.enter.native="table.query()">
|
<el-form-item :label="modelName"></el-form-item>
|
<el-form-item style="float: right">
|
<el-button type="danger" @click="closeDigram()">关闭</el-button>
|
</el-form-item>
|
</el-form>
|
<div
|
style="border: 1px solid #EAEBEE;border-radius: 6px;box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);height: calc(100vh - 233px);">
|
<div id="containerImg1"></div>
|
</div>
|
<config-node ref="configNode" v-show="type === 'node'"/>
|
<config-edge ref="configEdge" v-show="type === 'edge'"/>
|
</div>
|
</template>
|
|
<script>
|
import {Graph, Shape, Addon, Cell} from '@antv/x6'
|
import ConfigNode from './ConfigNode/configNode.vue'
|
import ConfigEdge from './ConfigEdge/configEdge.vue'
|
import {setHartBeat} from '@/commonJS/common';
|
import Cookies from 'js-cookie'
|
import {getUUID} from '../../../../packages/utils'
|
|
export default {
|
name: 'model-view',
|
props: {
|
projectId: {
|
type: String
|
},
|
diagarmId: {
|
type: String
|
},
|
pageCode: {
|
default: 'wlt_pz'
|
},
|
flowCode: {
|
type: String,
|
default: 'wltFlow'
|
},
|
},
|
components: {
|
ConfigNode,
|
ConfigEdge
|
},
|
computed: {
|
RBDDefault() {
|
let url = `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getSvgImage?token=${Cookies.get('token')}&id=`
|
let result = `
|
{
|
"cells":
|
[
|
]
|
}
|
`
|
return JSON.parse(result)
|
}
|
},
|
data() {
|
return {
|
isInitialization:false,
|
nodeX: '',
|
nodeY: '',
|
isFirstLoad: true,
|
hasMoveNode: false,
|
hasMoveSingleNode: null,
|
nodeAdded: false,
|
connectNode: {},
|
modelId: '',
|
modelName: '',
|
modelType: '',
|
timer: null,
|
imagesList: [
|
{
|
imgPath: 'parallel',
|
imgName: 'parallel',
|
nodeType: 'parallel',
|
imgWidth: 50,
|
imgHeight: 50,
|
imgId: '9',
|
data: {}
|
},
|
{imgPath: 'vote', imgName: 'vote', nodeType: 'vote', imgWidth: 50, imgHeight: 50, imgId: '6', data: {}},
|
{
|
imgPath: 'switch',
|
imgName: 'switch',
|
nodeType: 'switch',
|
imgWidth: 50,
|
imgHeight: 50,
|
imgId: '5',
|
data: {}
|
},
|
{
|
imgPath: 'bridgeConnection',
|
imgName: 'bridgeConnection',
|
nodeType: 'bridgeConnection',
|
imgWidth: 50,
|
imgHeight: 50,
|
imgId: '10',
|
data: {}
|
},
|
],
|
imagesList2: [],
|
nodeType: '',
|
first: true,
|
shape: '',
|
projectList: [],
|
diagramList: [],
|
diagramId: '',
|
projectId: '',
|
diagramJson: '',
|
diagramIdDisabled: false,
|
dataForm: {
|
id: null,
|
pid: null,
|
model_tag: '',
|
model_name: '',
|
product_id: null,
|
content: null,
|
publishContent: null,
|
hasPublish: 0,
|
urlPref: '',
|
nodeArr: []
|
},
|
type: '',
|
id: '',
|
graph: null,
|
globalGridAttr: {
|
productType: '',
|
voteNum: '',
|
repairMttcr: '',
|
repairMttcrOtherParams2: '',
|
repairMttcrOtherParams3: '',
|
repairDistribType: '',
|
reliabDistribType: '',
|
taskMtbcfOtherParams2: '',
|
taskMtbcfOtherParams3: '',
|
isRepair: 0,
|
taskMtbcf: '',
|
numberInputValue: '',
|
statusImg: '',
|
nodeTypeExt: '',
|
type: 'mesh',
|
size: 10,
|
color: '#e5e5e5',
|
thickness: 1,
|
colorSecond: '#d0d0d0',
|
thicknessSecond: 1,
|
factor: 4,
|
bgColor: '#e5e5e5',
|
showImage: true,
|
repeat: 'watermark',
|
position: 'center',
|
bgSize: JSON.stringify({width: 150, height: 150}),
|
opacity: 0.1,
|
|
stroke: '#5F95FF',
|
strokeWidth: 1,
|
connector: 'rounded',
|
router: 'manhattan',
|
label: '',
|
nodeStroke: '#5F95FF',
|
nodeStrokeWidth: 1,
|
nodeFill: '#ffffff',
|
nodeFontSize: 12,
|
nodeColor: '#080808',
|
nodeText: '',
|
nodeDate: '',
|
nodeUsers: '',
|
nodeDataDate: '',
|
nodeDataText: '',
|
dataId: '',
|
inspectName: '',
|
distance: 0.5,
|
angle: 0,
|
},
|
isReady: false,
|
curCel: Cell,
|
left_p: document.documentElement.clientHeight - 100,
|
ports: {
|
groups: {
|
top: {
|
position: {name: 'top'},
|
attrs: {
|
circle: {
|
r: 4,
|
magnet: true,
|
stroke: '#5F95FF',
|
strokeWidth: 1,
|
fill: '#fff',
|
style: {
|
visibility: 'hidden',
|
},
|
},
|
},
|
},
|
right: {
|
position: {name: 'right'},
|
attrs: {
|
circle: {
|
r: 4,
|
magnet: true,
|
stroke: '#5F95FF',
|
strokeWidth: 1,
|
fill: '#fff',
|
style: {
|
visibility: 'hidden',
|
},
|
},
|
},
|
},
|
bottom: {
|
position: {name: 'bottom'},
|
attrs: {
|
circle: {
|
r: 4,
|
magnet: true,
|
stroke: '#5F95FF',
|
strokeWidth: 1,
|
fill: '#fff',
|
style: {
|
visibility: 'hidden',
|
},
|
},
|
},
|
},
|
left: {
|
position: {name: 'left'},
|
attrs: {
|
circle: {
|
r: 4,
|
magnet: true,
|
stroke: '#5F95FF',
|
strokeWidth: 1,
|
fill: '#fff',
|
style: {
|
visibility: 'hidden',
|
},
|
},
|
},
|
},
|
},
|
items: [
|
{
|
id: 'top1',
|
group: 'top',
|
},
|
{
|
id: 'right1',
|
group: 'right',
|
},
|
{
|
id: 'bottom1',
|
group: 'bottom',
|
},
|
{
|
id: 'left1',
|
group: 'left',
|
},
|
],
|
}
|
}
|
},
|
watch: {
|
'$route.params.configId'() {
|
this.projectId = this.$route.params.projectId
|
console.log(this.$route.params.projectId, 'this.$route.params.projectId')
|
console.log(this.$route.params.diagramId, 'this.$route.params.diagramId')
|
},
|
},
|
mounted() {
|
this.type = 'grid'
|
},
|
methods: {
|
init(row) {
|
this.modelName = row.title
|
this.dataForm.id = row.id
|
this.collapseTransition = row.collapseTransition
|
// this.clearDiagram()
|
// if(!this.isInitialization){
|
// this.initDigram()
|
// }
|
// setTimeout(()=>{
|
// console.log(this.graph,'this.graph this.graph')
|
// this.getDiagram(this.dataForm.id)
|
// },0)
|
this.initDigram()
|
console.log(this.dataForm, 'init(row){')
|
},
|
closeDigram() {
|
this.collapseTransition = 14
|
this.$emit('closeWindow', this.collapseTransition)
|
},
|
async getDiagram(modelId) {
|
this.isFirstLoad = true;
|
let params = {
|
modelId: modelId,
|
urlPref: window.SITE_CONFIG['apiURL'],
|
token: Cookies.get('token'),
|
}
|
let res = await this.$http.get(`/taskReliability/ModelLine/getDiagram`, {params: params})
|
this.dataForm = res.data
|
if (res.data.content != null) {
|
console.log(this.dataForm, 'getDiagram datafrom222')
|
console.log(res.data, 'getDiagram res.data')
|
|
this.diagramJson = JSON.parse(this.dataForm.content)
|
this.graph.fromJSON(this.diagramJson)
|
console.log(this.diagramJson, 'this.diagramJson')
|
this.isFirstLoad = false;
|
console.log(this.diagramJson.cells.length, 'this.diagramJson.cells.length')
|
|
// this.graph.positionContent('left')
|
// this.graph.centerContent()
|
this.graph.positionContent('left', {padding: {left: 0}})
|
this.graph.freeze()
|
|
// this.graph.zoomToFit()
|
} /*else {
|
this.graph.fromJSON(this.RBDDefault)
|
this.isFirstLoad = false
|
}*/
|
},
|
async clearDiagram() {
|
// this.graph.fromJSON(this.emptyJson)
|
console.log(this.RBDDefault, 'clearDiagram')
|
this.graph.fromJSON(this.RBDDefault)
|
this.graph.positionContent('left')
|
this.isFirstLoad = false;
|
},
|
async initDigram() {
|
this.timer = setHartBeat(10, 240);
|
this.graph = new Graph({
|
container: document.getElementById('containerImg1'),
|
width: document.documentElement.clientWidth,
|
height: document.documentElement.clientHeight - 240,
|
// async: true,
|
grid: {
|
visible: true,
|
},
|
autoResize: true,
|
panning: {
|
enabled: true,
|
},
|
// scroller: {
|
// enabled: true,
|
// pannable: true,
|
// autoResize: false,
|
// },
|
})
|
this.isInitialization = true
|
await this.getDiagram(this.dataForm.id)
|
},
|
showPorts(ports, show) {
|
for (let i = 0, len = ports.length; i < len; i = i + 1) {
|
ports[i].style.visibility = show ? 'visible' : 'hidden'
|
}
|
},
|
reset() {
|
this.graph.drawBackground({color: '#fff'})
|
const nodes = this.graph.getNodes()
|
const edges = this.graph.getEdges()
|
nodes.forEach((node) => {
|
node.attr('body/stroke', '#5F95FF')
|
})
|
edges.forEach((edge) => {
|
edge.attr('line/stroke', '#5F95FF')
|
edge.prop('labels/0', {
|
attrs: {
|
body: {
|
stroke: '#5F95FF',
|
},
|
},
|
})
|
})
|
},
|
deleteCompment() {
|
const cells = this.graph.getSelectedCells()
|
console.log(cells, 'cells')
|
if (cells.length === 1) {
|
let node = cells[0]
|
if (!node.isNode()) {
|
this.$confirm('是否删除该连接线?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
node.remove()
|
this.$message({
|
type: 'success',
|
message: '删除成功!'
|
})
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
})
|
})
|
// this.$message({message: '请选中节点', type: 'warning'})
|
return false; // 取消操作
|
}
|
let nodeType = node.getData().nodeType
|
let deleteType = 0
|
if (nodeType === 'node' || nodeType === 'dashedBox') {
|
deleteType = 1
|
} else if ('parallel,switch,vote,bridge'.indexOf(nodeType) > -1) {
|
deleteType = 2
|
}
|
|
let canDelete = false
|
if (nodeType === 'start' || nodeType === 'end') {
|
this.$message({message: '不允许删除起始和结束节点', type: 'warning'})
|
return false; // 取消操作
|
}
|
if (deleteType > 0) {
|
let startNode = null
|
if (deleteType === 1) {
|
startNode = node
|
} else if (deleteType === 2) {
|
startNode = this.graph.getCellById(node.getData().startNodeId)
|
}
|
|
let isSeriesNode = this.isSeriesNode(startNode, node)
|
let isMultipleBrach = this.isMultipleBrach(node)
|
if (isSeriesNode) {
|
//串联
|
let inLine = this.getInLinesOfNode(startNode)
|
let outLine = this.getOutLinesOfNode(node)
|
let inLineIsToLine = this.hasOtherLineToMyLine(inLine[0].id)
|
let inNode = isSeriesNode.inNode
|
let outNode = isSeriesNode.outNode
|
console.log(inLine, outLine, 'inLine,outLine')
|
console.log(inNode, outNode, 'inNode,outNode')
|
//提示是否要删除
|
this.$confirm('是否删除该节点?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
if (inLineIsToLine) {
|
inLine[0].target = {cell: outNode.id, port: 'left1'}
|
} else {
|
outLine[0].source = {cell: inNode.id, port: 'right1'}
|
}
|
if (deleteType === 1) {
|
node.remove()
|
} else {
|
this.deleteCombination(node)
|
}
|
this.$message({
|
type: 'success',
|
message: '删除成功!'
|
})
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
})
|
return false
|
})
|
} else if (this.isMultipleBrach(node)) {
|
//提示是否要删除
|
this.$confirm('是否删除该节点?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
/* if (inLineIsToLine) {
|
inLine[0].target = {cell: outNode.id, port: 'left1'}
|
} else {
|
outLine[0].source = {cell: inNode.id, port: 'right1'}
|
}*/
|
if (deleteType === 1)
|
node.remove()
|
else
|
this.deleteCombination(node)
|
this.$message({
|
type: 'success',
|
message: '删除成功!'
|
})
|
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
})
|
return false
|
})
|
} else {
|
//提示不能删除
|
this.$message({message: '该条线路上只有该节点，无法删除', type: 'warning'})
|
return false; // 取消操作
|
}
|
}
|
} else {
|
//提示不能删除
|
this.$message({message: '只能选中一个节点', type: 'warning'})
|
return false; // 取消操作
|
}
|
},
|
async search() {
|
await this.getDiagram();
|
},
|
async saveDiagram() {
|
console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
|
// 获取所有子节点
|
this.getNodeArr()
|
this.dataForm.content = JSON.stringify(this.graph.toJSON())
|
this.dataForm.urlPref = window.SITE_CONFIG['apiURL']
|
console.log(this.dataForm, 'dataFrom')
|
await this.$http[this.dataForm.id === null ? 'post' : 'put'](`/taskReliability/ModelLine/`, this.dataForm).then(async res => {
|
if (res.msg === 'success') {
|
this.$emit('refreshDataList')
|
this.$alert('保存成功', '提示', {
|
confirmButtonText: '确定'
|
})
|
}
|
})
|
},
|
getNodeArr() {
|
const nodes = this.graph.getNodes()
|
let nodeArr2 = []
|
// 检查除当前节点之外的所有节点的包围框是否相交
|
for (const node of nodes) {
|
console.log(node, 'saveDiagram node')
|
if (node.getData().nodeType == 'node' && node.getData().dataId) {
|
nodeArr2.push(node.getData().dataId)
|
}
|
}
|
this.dataForm.nodeArr = nodeArr2
|
},
|
async analyzeDiagram() {
|
console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
|
// 检查除当前节点之外的所有节点的包围框是否相交
|
// 获取所有子节点
|
this.getNodeArr()
|
const nodes = this.graph.getNodes()
|
for (const node of nodes) {
|
if (node.getData().nodeType === 'dashedBox') {
|
this.$message({message: '该模型中存在虚框，无法保存', type: 'warning'})
|
return false; // 取消添加节点操作
|
}
|
if (node.getData().nodeType === 'vote') {
|
const edges = this.graph.getConnectedEdges(node);
|
if (node.getData().voteNum >= edges.length) {
|
this.$message({message: '表决数量不能高于该节点的进线数量', type: 'warning'})
|
return false; // 取消添加节点操作
|
}
|
}
|
}
|
this.dataForm.content = JSON.stringify(this.graph.toJSON())
|
this.dataForm.urlPref = window.SITE_CONFIG['apiURL']
|
await this.$http['post'](`/taskReliability/ModelLine/analyze`, this.dataForm).then(async res => {
|
if (res.msg === 'success') {
|
this.$emit('refreshDataList')
|
this.$alert('解析成功', '提示', {
|
confirmButtonText: '确定'
|
})
|
}
|
})
|
},
|
leftAlign() {
|
const NODE = this.graph.getSelectedCells()
|
let leftX = null
|
for (let a of NODE) {
|
if (leftX == null || a.getBBox().x < leftX) {
|
leftX = a.getBBox().x
|
}
|
}
|
for (let a of NODE) {
|
let y = a.getBBox().y
|
a.position(leftX, y)
|
// console.log(leftX, ':', y, ' x:y')
|
}
|
},
|
topAlign() {
|
const NODE = this.graph.getSelectedCells()
|
let topY = null
|
for (let a of NODE) {
|
console.log(a.getBBox(), 'a.getBBox()')
|
if (topY == null || a.getBBox().y < topY) {
|
topY = a.getBBox().y
|
}
|
}
|
for (let a of NODE) {
|
let x = a.getBBox().x
|
a.position(x, topY)
|
}
|
},
|
centerAlign() {
|
const NODE = this.graph.getSelectedCells()
|
let rightX = null
|
let leftX = null
|
for (let a of NODE) {
|
if (leftX == null || a.getBBox().x < leftX) {
|
leftX = a.getBBox().x
|
}
|
}
|
for (let a of NODE) {
|
if (rightX == null || a.getBBox().x + a.getBBox().width > rightX) {
|
rightX = a.getBBox().x + a.getBBox().width
|
}
|
}
|
|
let centerX = leftX + (rightX - leftX) / 2
|
|
for (let a of NODE) {
|
let y = a.getBBox().y
|
a.position(centerX - a.getBBox().width / 2, y)
|
}
|
},
|
shuipingAlign() {
|
const NODE = this.graph.getSelectedCells()
|
let bottomY = null
|
let topY = null
|
for (let a of NODE) {
|
if (topY == null || a.getBBox().y || 0 < topY) {
|
topY = a.getBBox().y
|
}
|
}
|
for (let a of NODE) {
|
if (bottomY == null || a.getBBox().y + a.getBBox().height > bottomY) {
|
bottomY = a.getBBox().y + a.getBBox().height
|
}
|
}
|
|
let centerY = topY + (bottomY - topY) / 2
|
for (let a of NODE) {
|
let x = a.getBBox().x
|
let centerHei = a.getBBox().height / 2
|
a.position(x, centerY - centerHei)
|
}
|
},
|
rightAlign() {
|
const NODE = this.graph.getSelectedCells()
|
let rightX = null
|
for (let a of NODE) {
|
if (rightX == null || a.getBBox().x + a.getBBox().width > rightX) {
|
rightX = a.getBBox().x + a.getBBox().width
|
}
|
}
|
for (let a of NODE) {
|
let y = a.getBBox().y
|
a.position(rightX - a.getBBox().width, y)
|
}
|
},
|
bottomAlign() {
|
const NODE = this.graph.getSelectedCells()
|
let bottomY = null
|
for (let a of NODE) {
|
if (bottomY == null || (a.getBBox().y + a.getBBox().height) > bottomY) {
|
bottomY = a.getBBox().y + a.getBBox().height
|
}
|
}
|
|
for (let a of NODE) {
|
let x = a.getBBox().x
|
a.position(x, bottomY - a.getBBox().height)
|
}
|
},
|
close() {
|
if (this.timer) {
|
window.clearInterval(this.timer)
|
}
|
},
|
// 定义函数来检查两个包围框是否相交
|
findIntersectsNode(node) {
|
const nodes = this.graph.getNodes()
|
let intersectNodes = []
|
const bbox1 = node.getBBox();
|
// 检查除当前节点之外的所有节点的包围框是否相交
|
for (const otherNode of nodes) {
|
if (otherNode === node) continue;
|
let nodeType = otherNode.getData().nodeType
|
if (nodeType === "parallel" || nodeType === "switch" || nodeType === "vote" || nodeType === "dashedBox") {
|
const bbox2 = otherNode.getBBox();
|
if (bbox1.x < bbox2.x + bbox2.width &&
|
bbox1.x + bbox1.width > bbox2.x &&
|
bbox1.y < bbox2.y + bbox2.height &&
|
bbox1.y + bbox1.height > bbox2.y) {
|
intersectNodes.push(otherNode);
|
}
|
}
|
}
|
if (intersectNodes.length === 1) {
|
//console.log('Intersecting nodes:', intersectNodes.map(n => n)); // 相交节点的对象
|
return intersectNodes[0]
|
} else {
|
//提示用户只能拖到一个有效的节点上
|
return null
|
}
|
},
|
// 相交的节点
|
addBranch(graphNode, dragNode) { // graphCell是画布上原有的节点。dragNode是当前拖拽的节点
|
let graphNodeType = graphNode.getData().nodeType
|
|
let dragNodeType = dragNode.getData().nodeType
|
let offHeight = 50
|
if (dragNodeType === 'node') {
|
offHeight = 60
|
} else if (dragNodeType === 'bridgeConnection') {
|
offHeight = 175
|
} else {
|
offHeight = 70
|
}
|
let centerX = 0, centerY = 0;
|
|
if (graphNodeType === 'dashedBox') { //虚框
|
const edges = this.graph.getConnectedEdges(graphNode); // 获取画布上原有的节点所有进来的线
|
let inEdges = edges.filter(edge => edge.target.cell === graphNode.id)
|
let startNode = null
|
let endNode = null
|
if (inEdges.length === 1) {
|
let startNodeId = inEdges[0].source.cell
|
startNode = this.graph.getCellById(startNodeId)
|
}
|
let outEdges = edges.filter(edge => edge.source.cell === graphNode.id)
|
if (outEdges.length === 1) {
|
let endNodeId = outEdges[0].target.cell
|
endNode = this.graph.getCellById(endNodeId)
|
}
|
if (startNode && endNode) {
|
centerX = graphNode.position().x + graphNode.getBBox().width / 2
|
centerY = graphNode.position().y + graphNode.getBBox().height / 2
|
let result = this.addNodeAndConnect(graphNode, dragNode, centerX, centerY)
|
if (!result) {
|
dragNode.remove()
|
this.$message({message: '没有足够的空间放置该节点，请扩大剩余空间', type: 'warning'})
|
return
|
}
|
|
let startPort = 'right1'
|
let endPort = 'left1'
|
if ((inEdges[0].target.port == 'top1' || outEdges[0].source.port == 'bottom1') && ('parallel,switch,vote,bridge'.indexOf(dragNodeType)) == -1) {
|
startPort = 'bottom1'
|
endPort = 'top1'
|
}
|
|
inEdges[0].target = {cell: result.newStartNode.id, port: endPort}
|
outEdges[0].source = {cell: result.newEndNode.id, port: startPort}
|
graphNode.remove()
|
}
|
} else { //并行结构
|
const graphNodeStartNodeId = graphNode.getData().startNodeId // 获取画布上原有节点的开始ID
|
const graphNodeStartNode = this.graph.getCellById(graphNodeStartNodeId) // 通过开始ID得到初始节点对象
|
let graphNodeY = graphNode.position().y - graphNode.getBBox().height / 2 // 获取画布原有节点的y坐标
|
let minY = graphNode.position().y
|
let maxY = graphNode.position().y + graphNode.getBBox().height
|
|
const edges = this.graph.getConnectedEdges(graphNode); // 获取画布上原有的节点所有进来的线
|
// 获取连接线的路径数据
|
let inEdges = edges.filter(edge => edge.target.cell === graphNode.id)
|
//遍历这个组合里面所有节点， 修改minY，maxY
|
let pointXY = {minY: minY, maxY: maxY}
|
console.log(pointXY, 'old')
|
this.getYRange(inEdges, graphNodeStartNode, pointXY)
|
console.log(pointXY, 'new')
|
|
let minX = graphNodeStartNode.position().x + graphNode.getBBox().width + 15
|
let maxX = graphNode.position().x
|
let centerX = minX + (maxX - minX) / 2
|
let centerY = graphNodeY + graphNode.getBBox().height / 2 - pointXY.minY > pointXY.maxY - (graphNodeY + graphNode.getBBox().height / 2) ?
|
pointXY.maxY + offHeight / 2 + 30 : pointXY.minY - offHeight / 2 - 30
|
|
let result = this.addNodeAndConnect(null, dragNode, minX, centerY)
|
if (!result) {
|
dragNode.remove()
|
this.$message({message: '没有足够的空间放置该节点，请扩大剩余空间', type: 'warning'})
|
return
|
}
|
this.graph.addEdge({
|
source: {cell: graphNodeStartNode, port: 'right1'},
|
target: {cell: result.newStartNode, port: 'left1'},
|
router: {name: 'manhattan'},
|
connector: {name: 'rounded'}
|
})
|
this.graph.addEdge({
|
source: {cell: result.newEndNode, port: 'right1'},
|
target: {cell: graphNode, port: 'left1'},
|
router: {name: 'manhattan'},
|
connector: {name: 'rounded'}
|
})
|
}
|
},
|
addNodeAndConnect(targetNode, dragNode, centerX, centerY) { // graphCell是画布上原有的节点。dragNode是当前拖拽的节点
|
let width = 100,
|
height = 80,
|
leftTopX = centerX,
|
leftTopY = centerY
|
let dragNodeType = dragNode.getData().nodeType
|
if (dragNodeType === 'node') {
|
width = 100
|
height = 70
|
} else if (dragNodeType === 'dashedBox') {
|
width = 60
|
height = 40
|
} else if (dragNodeType === 'bridgeConnection') {
|
width = 550
|
height = 175
|
} else {
|
width = 270
|
height = 70
|
}
|
leftTopX = centerX - width / 2
|
leftTopY = centerY - height / 2
|
if (!this.canPlace(targetNode, dragNode, {leftTopX, leftTopY, width, height})) {
|
return false
|
}
|
|
if (dragNodeType === 'node' || dragNodeType === 'dashedBox') {
|
dragNode.position(leftTopX, leftTopY)
|
return {newStartNode: dragNode, newEndNode: dragNode}
|
} else if (dragNodeType === 'bridgeConnection') {
|
return this.createBridgeConnection(leftTopX, leftTopY, dragNode)
|
} else {
|
return this.createParallelBrach(leftTopX, centerY, dragNode)
|
}
|
},
|
// 相交的边
|
addNodeAndInsertEdge(graphEdge, dragNode) {
|
const source = graphEdge.getSourceCell()
|
const target = graphEdge.getTargetCell()
|
|
let centerX = 0
|
let centerY = 0
|
if (!source.isNode() || !target.isNode()) {
|
if (source.isNode()) {
|
centerX = source.position().x + source.getBBox().width / 2
|
centerY = dragNode.position().y + dragNode.getBBox().height / 2
|
} else {
|
centerX = target.position().x + target.getBBox().width / 2
|
centerY = dragNode.position().y + dragNode.getBBox().height / 2
|
}
|
} else {
|
centerX = dragNode.position().x + dragNode.getBBox().width / 2
|
centerY = source.position().y + source.getBBox().height / 2
|
if (target.getData().nodeType === 'node') {
|
centerY = target.position().y + target.getBBox().height / 2
|
}
|
}
|
|
let startNodeId = graphEdge.source.cell
|
let startNode = this.graph.getCellById(startNodeId)
|
let endNodeId = graphEdge.target.cell
|
let endNode = this.graph.getCellById(endNodeId)
|
|
if (startNode && endNode) {
|
let isRight = true;
|
let startPort = 'right1'
|
let endPort = 'left1'
|
if (this.isTopBottom(graphEdge)) {
|
startPort = 'bottom1'
|
endPort = 'top1'
|
}
|
|
if (this.hasOtherLineToMyLine(graphEdge.id)) {
|
let leftX = startNode.position().x + startNode.getBBox().width
|
let rightX = endNode.position().x
|
// let centerX = dragNode.position().x + dragNode.getBBox().width / 2
|
if (centerX - leftX < rightX - centerX) {
|
isRight = false
|
}
|
}
|
|
let result = this.addNodeAndConnect(null, dragNode, centerX, centerY)
|
if (!result) {
|
dragNode.remove()
|
this.$message({message: '没有足够的空间放置该节点，请扩大剩余空间', type: 'warning'})
|
return
|
}
|
if (isRight) {
|
graphEdge.target = {cell: result.newStartNode.id, port: endPort}
|
this.graph.addEdge({
|
source: {cell: result.newEndNode, port: startPort},
|
target: {cell: endNode, port: endPort},
|
router: {name: 'manhattan'},
|
connector: {name: 'rounded'}
|
})
|
} else {
|
this.graph.addEdge({
|
source: {cell: startNode, port: startPort},
|
target: {cell: result.newStartNode, port: endPort},
|
router: {name: 'manhattan'},
|
connector: {name: 'rounded'}
|
})
|
graphEdge.source = {cell: result.newEndNode.id, port: startPort}
|
}
|
// graphEdge.remove()
|
}
|
},
|
findIntersectsEdge(graph, node) {
|
const edges = graph.getEdges()
|
const bbox = node.getBBox();
|
const lines = [bbox.leftLine, bbox.rightLine, bbox.topLine, bbox.bottomLine];
|
let res = [];
|
edges.forEach((edge) => {
|
const view = graph.findViewByCell(edge);
|
lines.forEach((line) => {
|
if (view) {
|
if (view.path.intersectsWithLine(line)) {
|
res.push(edge);
|
}
|
}
|
})
|
})
|
const uniqueArr = res.filter((insEdge, index) =>
|
res.findIndex(i => i.id === insEdge.id) === index);
|
console.log(uniqueArr, 'uniqueArr')
|
if (uniqueArr.length === 1) {
|
return uniqueArr[0]
|
} else {
|
return false
|
}
|
},
|
createParallelBrach(x, y, dragNode) {
|
dragNode.position(x + 320, y - dragNode.size().height / 2)
|
const connectNode = this.createConnectNode(x + 50, y)
|
const dashedBox = this.createDashedBox(x + 150, y)
|
dragNode.setData({startNodeId: connectNode.id})
|
|
this.graph.addEdge({
|
source: {cell: connectNode, port: 'right1'},
|
target: {cell: dashedBox, port: 'left1'},
|
router: {name: 'manhattan'},
|
connector: {name: 'rounded'}
|
})
|
this.graph.addEdge({
|
source: {cell: dashedBox, port: 'right1'},
|
target: {cell: dragNode, port: 'left1'},
|
router: {name: 'manhattan'},
|
connector: {name: 'rounded'}
|
})
|
return {newStartNode: connectNode, newEndNode: dragNode}
|
/* this.graph.addEdge({
|
source: {cell: startNode, port: 'right1'},
|
target: {cell: connectNode, port: 'left1'},
|
router: {name: 'manhattan'},
|
connector: {name: 'rounded'}
|
})
|
this.graph.addEdge({
|
source: {cell: dragNode, port: 'right1'},
|
target: {cell: endNode, port: 'left1'},
|
router: {name: 'manhattan'},
|
connector: {name: 'rounded'}
|
})*/
|
},
|
createBridgeConnection(x, y, dragNode) {
|
console.log(x, y, 'leftX centerY')
|
const leftTopDashedBox = this.createDashedBox(x + 40, y)
|
const rightTopDashedBox = this.createDashedBox(x + 380, y)
|
|
const leftConnectNode = this.createConnectNode(x, y + 87)
|
const alignCenterDashedBox = this.createDashedBox(x + 209, y + 87)
|
const rightConnectNode = this.createBridgeNode(x + 530, y + 87)
|
|
const leftBottomDashedBox = this.createDashedBox(x + 40, y + 160)
|
const rightBottomDashedBox = this.createDashedBox(x + 380, y + 160)
|
|
rightConnectNode.setData({startNodeId: leftConnectNode.id})
|
leftConnectNode.setData({endNodeId: rightConnectNode.id})
|
/* this.graph.addEdge({
|
source: {cell: startNode, port: 'right1'},
|
target: {cell: leftConnectNode, port: 'left1'},
|
router: {name: 'manhattan'},
|
connector: {name: 'rounded'},
|
})
|
this.graph.addEdge({
|
source: {cell: rightConnectNode, port: 'right1'},
|
target: {cell: endNode, port: 'left1'},
|
router: {name: 'manhattan'},
|
connector: {name: 'rounded'}
|
})*/
|
this.graph.addEdge({
|
source: {cell: leftConnectNode, port: 'right1'},
|
target: {cell: leftTopDashedBox, port: 'left1'},
|
router: {name: 'manhattan'},
|
connector: {name: 'rounded'},
|
})
|
this.graph.addEdge({
|
source: {cell: leftConnectNode, port: 'right1'},
|
target: {cell: leftBottomDashedBox, port: 'left1'},
|
router: {name: 'manhattan'},
|
connector: {name: 'rounded'},
|
})
|
|
let edgeTop = this.graph.addEdge({
|
source: {cell: leftTopDashedBox, port: 'right1'},
|
target: {cell: rightTopDashedBox, port: 'left1'},
|
router: {name: 'manhattan'},
|
connector: {name: 'rounded'},
|
})
|
let edgeBottom = this.graph.addEdge({
|
source: {cell: leftBottomDashedBox, port: 'right1'},
|
target: {cell: rightBottomDashedBox, port: 'left1'},
|
router: {name: 'manhattan'},
|
connector: {name: 'rounded'},
|
})
|
|
this.graph.addEdge({
|
source: {cell: rightTopDashedBox, port: 'right1'},
|
target: {cell: rightConnectNode, port: 'left1'},
|
router: {name: 'manhattan'},
|
connector: {name: 'rounded'},
|
})
|
this.graph.addEdge({
|
source: {cell: rightBottomDashedBox, port: 'right1'},
|
target: {cell: rightConnectNode, port: 'left1'},
|
router: {name: 'manhattan'},
|
connector: {name: 'rounded'},
|
})
|
|
this.graph.addEdge({
|
source: {cell: edgeTop},
|
target: {cell: alignCenterDashedBox, port: 'top1'},
|
router: {name: 'manhattan'},
|
connector: {name: 'rounded'},
|
})
|
this.graph.addEdge({
|
source: {cell: alignCenterDashedBox, port: 'bottom1'},
|
target: {cell: edgeBottom},
|
router: {name: 'manhattan'},
|
connector: {name: 'rounded'},
|
})
|
dragNode.remove()
|
return {newStartNode: leftConnectNode, newEndNode: rightConnectNode}
|
},
|
createDashedBox(x, y) {
|
const dashId = getUUID().toString()
|
let dashedBox = this.graph.addNode({
|
shape: 'image',
|
// imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
|
width: 60,
|
height: 40,
|
id: dashId,
|
data: {
|
isSelfCreated: true,
|
type: 'imageNodes',
|
dataId: '',
|
nodeType: 'dashedBox',
|
nodeTypeExt: '',
|
voteNum: ''
|
},
|
attrs: {
|
image: {
|
'xlink:href': '/modelImg/dashedBox.svg',
|
},
|
text: {
|
text: 'dashedBox',
|
fontSize: 14,
|
refX: 0.5,
|
refY: '100%',
|
refY2: 4,
|
textAnchor: 'middle',
|
textVerticalAnchor: 'top',
|
},
|
},
|
ports: {...this.ports},
|
})
|
dashedBox.position(x, y - dashedBox.size().height / 2)
|
return dashedBox
|
},
|
createConnectNode(x, y) {
|
const connectId = getUUID().toString()
|
const dragNodeId = getUUID().toString()
|
let connectNode = this.graph.addNode({
|
shape: 'image',
|
width: 10,
|
height: 10,
|
id: connectId,
|
data: {
|
isSelfCreated: true,
|
type: 'imageNodes',
|
endNodeId: dragNodeId,
|
dataId: '',
|
nodeType: 'connect',
|
nodeTypeExt: '',
|
voteNum: ''
|
},
|
attrs: {
|
image: {
|
'xlink:href': '/modelImg/connect.svg',
|
},
|
text: {
|
text: 'connect',
|
fontSize: 14,
|
refX: 0.5,
|
refY: '100%',
|
refY2: 4,
|
textAnchor: 'middle',
|
textVerticalAnchor: 'top',
|
},
|
},
|
ports: {...this.ports},
|
})
|
connectNode.position(x, y - connectNode.size().height / 2)
|
return connectNode
|
},
|
createBridgeNode(x, y) {
|
const connectId = getUUID().toString()
|
const dragNodeId = getUUID().toString()
|
let bridgeNode = this.graph.addNode({
|
shape: 'image',
|
width: 30,
|
height: 30,
|
id: connectId,
|
data: {
|
isSelfCreated: true,
|
type: 'imageNodes',
|
endNodeId: dragNodeId,
|
dataId: '',
|
nodeType: 'bridge',
|
nodeTypeExt: '',
|
voteNum: ''
|
},
|
attrs: {
|
image: {
|
'xlink:href': '/modelImg/connect.svg',
|
},
|
text: {
|
text: 'bridge',
|
fontSize: 14,
|
refX: 0.5,
|
refY: '100%',
|
refY2: 4,
|
textAnchor: 'middle',
|
textVerticalAnchor: 'top',
|
},
|
},
|
ports: {...this.ports},
|
})
|
bridgeNode.position(x, y - bridgeNode.size().height / 2)
|
return bridgeNode
|
},
|
getYRange(inEdges, startNode, pointXY) {
|
for (let inEdge of inEdges) {
|
let nodeId = inEdge.source.cell
|
let node = this.graph.getCellById(nodeId)
|
if (node.position().y < pointXY.minY) {
|
pointXY.minY = node.position().y
|
}
|
if (node.position().y + node.getBBox().height > pointXY.maxY) {
|
pointXY.maxY = node.position().y + node.getBBox().height
|
}
|
if (node.id === startNode.id) {
|
continue
|
}
|
const edges = this.graph.getConnectedEdges(node); // 获取画布上原有的节点所有进来的线
|
let inEdgesPrev = edges.filter(edge => edge.target.cell === node.id)
|
this.getYRange(inEdgesPrev, startNode, pointXY)
|
}
|
},
|
isSeriesNode(startNode, endNode) {
|
let result = false
|
let inNode = null
|
let outNode = null
|
let inEdges = this.getInLinesOfNode(startNode)
|
console.log(inEdges, 'inEdges')
|
if (inEdges.length === 1) {
|
let isMyLineToOtherLine = this.isMyLineToOtherLine(inEdges[0])
|
let hasOtherLineToMyLine = this.hasOtherLineToMyLine(inEdges[0].id)
|
let inNodeId = inEdges[0].source.cell
|
inNode = this.graph.getCellById(inNodeId)
|
if (!isMyLineToOtherLine && !hasOtherLineToMyLine) {
|
let inNodeType = inNode.getData().nodeType
|
console.log(inNodeType, 'inNodeType')
|
if ('node,dashedBox,parallel,switch,vote,bridge'.indexOf(inNodeType) > -1) {
|
result = true
|
}
|
}
|
}
|
let outEdges = this.getOutLinesOfNode(endNode)
|
console.log(outEdges, 'outEdges')
|
if (outEdges.length === 1) {
|
let isMyLineToOtherLine = this.isMyLineToOtherLine(outEdges[0])
|
let hasOtherLineToMyLine = this.hasOtherLineToMyLine(outEdges[0].id)
|
let outNodeId = outEdges[0].target.cell
|
outNode = this.graph.getCellById(outNodeId)
|
if (!isMyLineToOtherLine && !hasOtherLineToMyLine) {
|
let outNodeType = outNode.getData().nodeType
|
if ('node,connect,dashedBox'.indexOf(outNodeType) > -1) {
|
result = true
|
}
|
}
|
}
|
console.log(result, 'result')
|
if (result && inNode && outNode) {
|
console.log(inNode, outNode, 'inNode, outNode')
|
return {inNode, outNode}
|
} else {
|
return false
|
}
|
},
|
hasOtherLineToMyLine(edgeId) {
|
for (let edge of this.graph.getEdges()) {
|
if (edge.source.cell === edgeId || edge.target.cell === edgeId)
|
return true
|
}
|
return false
|
},
|
isMyLineToOtherLine(myEdge) {
|
for (let edge of this.graph.getEdges()) {
|
if (myEdge.source.cell === edge.id || myEdge.target.cell === edge.id)
|
return true
|
}
|
return false
|
},
|
isTopBottom(edge) {
|
if (edge.source.port === 'top1' || edge.source.port === 'bottom1' || edge.target.port === 'top1' || edge.target.port === 'bottom1') {
|
return true
|
}
|
},
|
isMultipleBrach(node) {
|
let outEdges = this.getOutLinesOfNode(node)
|
let outNodeId = outEdges[0].target.cell
|
if (this.isTopBottom(outEdges[0]))
|
return false
|
let outNode = this.graph.getCellById(outNodeId)
|
if ('bridge,end'.indexOf(outNode.getData().nodeType) > -1) {
|
return false
|
}
|
let inEdges = this.getInLinesOfNode(outNode)
|
return inEdges.length > 1;
|
},
|
deleteCombination(node) {
|
let startNode = this.graph.getCellById(node.getData().startNodeId)
|
let allCombinationNodes = []
|
console.log(startNode, 'startNode')
|
this.getAllCombinationNodes(startNode.id, node, allCombinationNodes)
|
console.log(allCombinationNodes, 'allCombinationNodes')
|
this.graph.removeCells(allCombinationNodes)
|
},
|
getAllCombinationNodes(startNodeId, node, allCombinationNodes) {
|
allCombinationNodes.push(node)
|
if (node.id == startNodeId || node.isEdge()) {
|
return
|
}
|
let inEdges = this.getInLinesOfNode(node) // 如果？？？
|
for (let inEdge of inEdges) {
|
let lineNode = this.getNodeOfConectLine(inEdge)
|
if (lineNode) {
|
this.getAllCombinationNodes(startNodeId, lineNode, allCombinationNodes)
|
}
|
let inNodeId = inEdge.source.cell
|
let inNode = this.graph.getCellById(inNodeId)
|
if (inNode.isEdge())
|
continue
|
this.getAllCombinationNodes(startNodeId, inNode, allCombinationNodes)
|
}
|
},
|
getNodeOfConectLine(paramEdge) {
|
for (let edge of this.graph.getEdges()) {
|
let nodeId = null
|
/* if (edge.source.cell === paramEdge.id){
|
nodeId = edge.target.cell
|
}*/
|
if (edge.target.cell === paramEdge.id) {
|
nodeId = edge.source.cell
|
}
|
if (nodeId) {
|
let node = this.graph.getCellById(nodeId)
|
if (node.isNode())
|
return node
|
}
|
}
|
return null
|
},
|
getInLinesOfNode(node) {
|
const edges = this.graph.getConnectedEdges(node); // 获取画布上原有的节点所有进来的线
|
console.log(edges, '获取画布上开始节点所有的线 edges')
|
return edges.filter(edge => edge.target.cell === node.id)
|
},
|
getOutLinesOfNode(node) {
|
console.log(node, '获取画布上的结束节点 node')
|
const edges = this.graph.getConnectedEdges(node); // 获取画布上原有的节点所有进来的线
|
console.log(edges, '获取画布上的结束节点所有的线 edges')
|
return edges.filter(edge => edge.source.cell === node.id)
|
},
|
canPlace(targetNode, dragNode, box2) {
|
const nodes = this.graph.getNodes()
|
let intersectNodes = []
|
// 检查除当前节点之外的所有节点的包围框是否相交
|
for (const otherNode of nodes) {
|
if (otherNode === dragNode || otherNode === targetNode) continue;
|
const bbox1 = otherNode.getBBox();
|
if (bbox1.x < box2.leftTopX + box2.width &&
|
bbox1.x + bbox1.width > box2.leftTopX &&
|
bbox1.y < box2.leftTopY + box2.height &&
|
bbox1.y + bbox1.height > box2.leftTopY) {
|
intersectNodes.push(otherNode);
|
}
|
}
|
console.log(box2, 'box2')
|
console.log(intersectNodes, 'intersectNodes')
|
return intersectNodes.length <= 0;
|
},
|
undo() {
|
if (this.graph.history.canUndo()) {
|
this.graph.history.undo()
|
}
|
},
|
redo() {
|
if (this.graph.history.canRedo()) {
|
this.graph.history.redo()
|
}
|
}
|
},
|
}
|
</script>
|
|
<style>
|
#containerImg1 {
|
display: flex;
|
/*border: 1px solid #dfe3e8;*/
|
height: 400px;
|
width: 100% !important;
|
}
|
|
.x6-graph-scroller.x6-graph-scroller-pannable {
|
width: 100% !important;
|
}
|
|
/*#stencilImg {*/
|
/* width: 100%;*/
|
/* height: 100%;*/
|
/* position: relative;*/
|
/* border-right: 1px solid #dfe3e8;*/
|
/*}*/
|
|
.x6-widget-stencil {
|
position: relative;
|
height: 100%;
|
}
|
|
#stencilImg .x6-graph-svg-viewport {
|
height: 100%;
|
}
|
|
.x6-widget-stencil-content {
|
position: relative;
|
height: calc(100% - 32px);
|
}
|
|
#stencilImg .x6-widget-stencil.collapsable > .x6-widget-stencil-content {
|
top: 0
|
}
|
|
</style>
|
