<template>
|
<div>
|
<el-row :gutter="[8,8]">
|
<el-col :span="4">
|
<div :style="'height:' +left_p+'px'">
|
<div style="height: 100%">
|
<div id="stencilImg"></div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="20">
|
<div class="fa-card-a">
|
<el-form :inline="true">
|
<el-form-item>
|
模型名称：{{ modelName }}
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="saveDiagram()">暂存</el-button>
|
<el-button type="primary" @click="analyzeDiagram()">提交</el-button>
|
<el-button type="primary" @click="clearDiagram()">清空图形</el-button>
|
<el-checkbox style="margin: 0 10px 0 10px" v-model="dataForm.autoLayout" :true-label="1" :false-label="0">
|
是否开启一键排版
|
</el-checkbox>
|
<el-button type="primary" @click="layoutDiagram()" :disabled="!dataForm.autoLayout">一键排版</el-button>
|
<el-button @click="leftAlign()">
|
<i style="font-size: 1rem;" class="wt-iconfont icon-zuoduiqi"></i>
|
</el-button>
|
<el-button @click="centerAlign()">
|
<i style="font-size: 1rem;" class="wt-iconfont icon-chuizhiduiqi"></i>
|
</el-button>
|
<el-button @click="rightAlign()">
|
<i style="font-size: 1rem;" class="wt-iconfont icon-youduiqi"></i>
|
</el-button>
|
<el-button @click="topAlign()">
|
<i style="font-size: 1rem;" class="wt-iconfont icon-dingduiqi"></i>
|
</el-button>
|
<el-button @click="shuipingAlign()">
|
<i style="font-size: 1rem;" class="wt-iconfont icon-shuipingduiqi"></i>
|
</el-button>
|
<el-button @click="bottomAlign()">
|
<i style="font-size: 1rem;" class="wt-iconfont icon-diduiqi"></i>
|
</el-button>
|
</el-form-item>
|
<el-form-item>
|
<el-button @click="undo()">撤销</el-button>
|
<el-button @click="redo()">重做</el-button>
|
</el-form-item>
|
<el-form-item>
|
<zt-button type="delete" @click="deleteCompment()"/>
|
</el-form-item>
|
</el-form>
|
<div id="containerImg" style="border: 1px solid #EAEBEE;border-radius: 6px;
|
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);height: 100%">
|
</div>
|
<config-node ref="configNode" v-show="type === 'node'"/>
|
<config-edge ref="configEdge" v-show="type === 'edge'"/>
|
</div>
|
</el-col>
|
</el-row>
|
</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'
|
// import Mousetrap from 'mousetrap'
|
// var Mousetrap = require('mousetrap');
|
// import RBDDefault from './RBD-default.json'
|
|
export default {
|
name: 'RBD-edit-img',
|
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":
|
[
|
{
|
"position": {
|
"x": -600,
|
"y": 0
|
},
|
"size": {
|
"width": 60,
|
"height": 40
|
},
|
"attrs": {
|
"text": {
|
"refY": "100%",
|
"textVerticalAnchor": "top",
|
"text": "",
|
"refY2": 4
|
},
|
"image": {
|
"xlink:href": "${url}10011"
|
}
|
},
|
"visible": true,
|
"shape": "image",
|
"id": "10000",
|
"data": {
|
"type": "imageNodes",
|
"endNodeId": "20000",
|
"dataId": "",
|
"nodeType": "start",
|
"nodeTypeExt": "",
|
"voteNum": ""
|
},
|
"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"
|
}
|
]
|
},
|
"zIndex": 1
|
},
|
{
|
"position": {
|
"x": 0,
|
"y": 0
|
},
|
"size": {
|
"width": 60,
|
"height": 40
|
},
|
"attrs": {
|
"text": {
|
"refY": "100%",
|
"textVerticalAnchor": "top",
|
"text": "",
|
"refY2": 4
|
},
|
"image": {
|
"xlink:href": "${url}10015"
|
}
|
},
|
"visible": true,
|
"shape": "image",
|
"id": 15000,
|
"data": {
|
"type": "imageNodes",
|
"dataId": "",
|
"nodeType": "dashedBox",
|
"nodeTypeExt": "",
|
"voteNum": ""
|
},
|
"ports": {
|
"groups": {
|
"top": {
|
"position": {
|
"name": "top"
|
},
|
"attrs": {
|
"circle": {
|
"r": 4,
|
"magnet": true,
|
"stroke": "#5F95FF",
|
|
"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"
|
}
|
]
|
},
|
"zIndex": 2
|
},
|
{
|
"position": {
|
"x": 600,
|
"y": 0
|
},
|
"size": {
|
"width": 60,
|
"height": 40
|
},
|
"attrs": {
|
"text": {
|
"refY": "100%",
|
"textVerticalAnchor": "top",
|
"text": "",
|
"refY2": 4
|
},
|
"image": {
|
"xlink:href": "${url}10012"
|
}
|
},
|
"visible": true,
|
"shape": "image",
|
"id": "20000",
|
"data": {
|
"type": "imageNodes",
|
"startNodeId": "10000",
|
"dataId": "",
|
"nodeType": "end",
|
"nodeTypeExt": "",
|
"voteNum": ""
|
},
|
"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"
|
}
|
]
|
},
|
"zIndex": 3
|
},
|
{
|
"shape": "edge",
|
"id": "66c81c68-0827-4a3c-8343-e2c453d3e9e7",
|
"router": {
|
"name": "manhattan",
|
"args": {
|
"startDirections": ["right"],
|
"endDirections": ["left"]
|
}
|
},
|
"connector": {
|
"name": "rounded"
|
},
|
"source": {
|
"cell": "10000"
|
},
|
"target": {
|
"cell": 15000
|
},
|
"zIndex": -1
|
},
|
{
|
"shape": "edge",
|
"id": "a0f3cf90-6d37-4ee0-a254-90b4ec2b6a7f",
|
"router": {
|
"name": "manhattan",
|
"args": {
|
"startDirections": ["right"],
|
"endDirections": ["left"]
|
}
|
},
|
"connector": {
|
"name": "rounded"
|
},
|
"source": {
|
"cell": 15000
|
},
|
"target": {
|
"cell": "20000"
|
},
|
"zIndex": -1
|
}
|
]
|
}
|
`
|
return JSON.parse(result)
|
}
|
},
|
data() {
|
return {
|
canAdd: true,
|
nodeX: '',
|
nodeY: '',
|
isFirstLoad: true,
|
hasMoveNode: false,
|
hasMoveSingleNode: null,
|
nodeAdded: false,
|
connectNode: {},
|
modelId: '',
|
modelName: '',
|
modelType: '',
|
timer: null,
|
imagesList: [
|
{
|
imgPath: 'switch',
|
imgName: '',
|
nodeType: 'switch',
|
imgWidth: 50,
|
imgHeight: 50,
|
imgId: '9',
|
data: {}
|
},
|
{imgPath: 'vote', imgName: '', nodeType: 'vote', imgWidth: 50, imgHeight: 50, imgId: '6', data: {}},
|
{
|
imgPath: 'parallel',
|
imgName: '',
|
nodeType: 'parallel',
|
imgWidth: 50,
|
imgHeight: 50,
|
imgId: '5',
|
data: {}
|
},
|
{
|
imgPath: 'bridgeConnection',
|
imgName: '',
|
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: [],
|
autoLayout: 1,
|
},
|
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: {
|
name: 'manhattan',
|
args: {
|
startDirections: ['top', 'bottom'], // 从下方开始
|
endDirections: ['left'], // 向左方结束
|
},
|
},
|
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'() {
|
// alert('$route.params.projectId change')
|
this.projectId = this.$route.params.projectId
|
//this.diagramId = this.$route.params.diagramId
|
console.log(this.$route.params.projectId, 'this.$route.params.projectId')
|
console.log(this.$route.params.diagramId, 'this.$route.params.diagramId')
|
}
|
},
|
mounted() {
|
//this.initDigram()
|
this.type = 'grid'
|
},
|
methods: {
|
init(row) {
|
this.modelName = row.modelName
|
this.dataForm.id = row.id
|
// this.productId = row.productId
|
// this.getProduct(row.productId)
|
this.initDigram(row.productId)
|
console.log(this.dataForm, 'init(row){')
|
},
|
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
|
this.dataForm.autoLayout = parseInt(this.dataForm.autoLayout)
|
if (res.data.content != null) {
|
console.log(this.dataForm, 'getDiagram datafrom')
|
console.log(res.data, 'getDiagram res.data')
|
this.diagramJson = JSON.parse(this.dataForm.content)
|
this.graph.fromJSON(this.diagramJson)
|
this.isFirstLoad = false;
|
console.log(this.diagramJson.cells.length, 'this.diagramJson.cells.length')
|
|
this.graph.positionContent('left')
|
// this.graph.centerContent()
|
// 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;
|
// this.graph.centerContent()
|
// this.graph.zoomToFit()
|
// this.graph.freeze()
|
},
|
async initDigram(productId) {
|
this.timer = setHartBeat(10, 240);
|
console.log(document.documentElement.clientWidth, 'document.documentElement.clientWidth')
|
console.log(document.documentElement.clientHeight, 'document.documentElement.clientHeight')
|
this.graph = new Graph({
|
container: document.getElementById('containerImg'),
|
width: document.documentElement.clientWidth,
|
height: document.documentElement.clientHeight - 200,
|
// async: true,
|
grid: {
|
visible: true,
|
},
|
autoResize: true,
|
history: {
|
enabled: true,
|
beforeAddCommand(event, args) {
|
if (args.key === 'tools') {
|
// console.log(args.key, 'event, args')
|
return false
|
}
|
},
|
},
|
scroller: {
|
enabled: true,
|
pageVisible: true,
|
autoResize: true,
|
pageBreak: true,
|
pannable: true,
|
minVisibleWidth: 200,
|
minVisibleHeight: 200,
|
modifiers: 'shift',
|
},
|
mousewheel: {
|
enabled: true,
|
zoomAtMousePosition: true,
|
modifiers: 'ctrl',
|
minScale: 0.5,
|
maxScale: 3,
|
},
|
connecting: {
|
router: {
|
name: 'manhattan',
|
args: {
|
startDirections: ['top', 'bottom'], // 从下方开始
|
endDirections: ['left'], // 向左方结束
|
},
|
},
|
connector: {
|
name: 'rounded',
|
args: {
|
radius: 5,
|
},
|
},
|
anchor: 'center',
|
connectionPoint: 'anchor',
|
allowBlank: false,
|
allowLoop: false, // 是否允许创建循环连线，即边的起始节点和终止节点为同一节点，默认为 true
|
snap: {
|
radius: 20,
|
},
|
createEdge() {
|
return new Shape.Edge({
|
attrs: {
|
line: {
|
// sourceMarker: 'block', // 实心箭头
|
stroke: '#A2B1C3',
|
strokeWidth: 2,
|
targetMarker: null
|
}
|
},
|
labels: [{
|
attrs: {
|
body: {
|
stroke: '#5F95FF',
|
},
|
text: {
|
text: ''
|
}
|
},
|
position: {
|
distance: 0.5,
|
angle: 180,
|
options: {
|
keepGradient: true,
|
ensureLegibility: true
|
}
|
}
|
}],
|
tools: {
|
name: 'segments',
|
args: {
|
attrs: {fill: '#666'},
|
},
|
},
|
zIndex: -100,
|
})
|
},
|
validateConnection({targetMagnet}) {
|
return !!targetMagnet
|
},
|
},
|
highlighting: {
|
magnetAdsorbed: {
|
name: 'stroke',
|
args: {
|
attrs: {
|
fill: '#5F95FF',
|
stroke: '#5F95FF',
|
},
|
},
|
},
|
},
|
resizing: true,
|
rotating: true,
|
selecting: {
|
enabled: true,
|
rubberband: true,
|
rubberEdge: true,
|
showNodeSelectionBox: true,
|
},
|
snapline: true,
|
keyboard: true,
|
clipboard: true,
|
})
|
this.graph.centerContent()
|
const stencil = new Addon.Stencil({
|
// getDragNode: (node) => {
|
// node.removeAttrs('title')
|
// },
|
getDropNode: (node) => {
|
this.canAdd = true
|
const {width, height} = node.size()
|
if (node.getData().type && node.getData().type === 'imageNodes2') {
|
const nodes = this.graph.getNodes()
|
let deviceNoArr = []
|
|
for (const node2 of nodes) {
|
console.log(node2, 'saveDiagram node')
|
if (node2.getData().nodeType == 'node' && node2.getData().dataId) {
|
if (node2.getData().dataId == node.getData().dataId) {
|
deviceNoArr.push(node2.getData().deviceNo)
|
}
|
}
|
}
|
let no = 0
|
console.log(node, 'node')
|
console.log(deviceNoArr, 'deviceNoArr')
|
for (let i = 1; i <= node.getData().basicUnitNum; i++) {
|
if (deviceNoArr.findIndex(item => item === i) === -1) {
|
no = i
|
if (node.getData().basicUnitNum >= 1) {
|
node.getData().deviceNo = i
|
if(node.getData().deviceNo > 1){
|
node.attr('text/text', node.attr('text/text') + '-' + i)
|
}
|
}
|
break
|
}
|
}
|
if (no === 0) {
|
this.canAdd = false
|
}
|
}
|
return node.clone()
|
|
},
|
validateNode: (node) => {
|
if (!this.canAdd) {
|
this.$message({message: '该设备节点已在画布上，无法再次绘制', type: 'warning'})
|
return false
|
}
|
|
},
|
title: '',
|
target: this.graph,
|
stencilGraphWidth: 240,
|
stencilGraphHeight: 280,
|
collapsable: true,
|
groups: [
|
{
|
title: '运算符号',
|
name: 'group1',
|
graphHeight: 200,
|
},
|
{
|
title: '设备节点',
|
name: 'group2',
|
graphHeight: '',
|
layoutOptions: {
|
rowHeight: 100,
|
},
|
}
|
],
|
layoutOptions: {
|
columns: 2,
|
columnWidth: 130,
|
},
|
})
|
document.getElementById('stencilImg').appendChild(stencil.container)
|
const imageNodes = this.imagesList.map((item) =>
|
this.graph.createNode({
|
shape: 'image',
|
// imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
|
width: item.imgWidth,
|
height: item.imgHeight,
|
id: item.imgId,
|
data: {
|
type: 'imageNodes',
|
dataId: '',
|
startNodeId: '',
|
endNodeId: '20000',
|
nodeType: item.nodeType,
|
nodeTypeExt: '',
|
voteNum: ''
|
},
|
attrs: {
|
image: {
|
'xlink:href': '/modelImg/' + item.imgPath + '.svg',
|
},
|
text: {
|
text: item.imgName,
|
fontSize: 14,
|
style: {
|
color: this.globalGridAttr.nodeColor
|
},
|
refX: 0.5,
|
refY: '100%',
|
refY2: 4,
|
textAnchor: 'middle',
|
textVerticalAnchor: 'top',
|
},
|
},
|
ports: {...this.ports},
|
}),
|
)
|
let params = {
|
productId: productId
|
}
|
let res = await this.$http.get(`/basicInfo/XhProductModel/getProduct`, {params: params})
|
this.imagesList2 = res.data
|
/*for(let i =0;i<this.imagesList2.length;i++){
|
|
}*/
|
console.log(this.imagesList2, 'getProduct(productId)234567890')
|
const imageNodes2 = this.imagesList2.map((item) =>
|
this.graph.createNode({
|
shape: 'image',
|
//imageUrl: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=${item.imgPath}`,
|
width: 60,
|
height: 70,
|
//id: item.dataId, // 手动设置节点的 ID
|
data: {
|
type: 'imageNodes2',
|
dataId: item.dataId,
|
basicUnitNum: item.basicUnitNum,
|
deviceNo: 1,
|
nodeType: item.nodeType,
|
nodeTypeExt: item.nodeTypeExt,
|
productType: item.productType,
|
statusImg: item.statusImg,
|
|
reliabDistribType: item.reliabDistribType ? item.reliabDistribType : 1,
|
taskMtbcf: item.taskMtbcf,
|
taskMtbcfOther2: item.taskMtbcfOtherParams2,
|
taskMtbcfOther3: item.taskMtbcfOtherParams3,
|
|
isRepair: item.isRepair,
|
repairDistribType: item.repairDistribType ? item.repairDistribType : 1,
|
repairMttcr: item.repairMttcr,
|
repairMttcrOther2: item.repairMttcrOtherParams2,
|
repairMttcrOther3: item.repairMttcrOtherParams3,
|
successRate: item.successRate,
|
|
imgHeight: item.imgHeight,
|
imgWidth: item.imgWidth,
|
voteNum: '',
|
},
|
attrs: {
|
image: {
|
'xlink:href': `${window.SITE_CONFIG['apiURL']}/basicInfo/XhProductModel/getImg?token=${Cookies.get('token')}&id=${item.dataId}&t=${new Date().getTime()}`,
|
//'xlink:href': urlObject.createObjectURL(new Blob([item.svgContent])),
|
},
|
title: {
|
text: item.basicUnitNum > 1 ? item.basicUnitNum : '',
|
refX: 15,
|
refY: 10,
|
fill: '#748be7',
|
fontSize: 14,
|
fontWeight: 'bold',
|
'text-anchor': 'start',
|
},
|
text: {
|
text: item.imgName,
|
fontSize: 14,
|
refX: 0.5,
|
refY: '85%',
|
refY2: 4,
|
textAnchor: 'middle',
|
textVerticalAnchor: 'top',
|
textWrap: {
|
width: 120, // 宽度为 120px换行
|
ellipsis: false, // 文本超出显示范围时，自动添加省略号
|
breakWord: true, // 是否截断单词
|
}
|
},
|
},
|
markup: [
|
{
|
tagName: 'image',
|
selector: 'image',
|
},
|
{
|
tagName: 'text',
|
selector: 'title',
|
},
|
{
|
tagName: 'text',
|
selector: 'text',
|
},
|
],
|
// tools: [
|
// {
|
// name: 'button',
|
// args: {
|
// markup: [
|
// {
|
// tagName: 'image',
|
// selector: 'icon',
|
// attrs: {
|
// 'xlink:href': 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ',
|
// // 'xlink:href': item.statusImg,
|
// width: 30,
|
// height: 30,
|
// x: 0,
|
// y: 0
|
// }
|
// }
|
// ]
|
// }
|
// }
|
// ],
|
ports: {...this.ports},
|
}),
|
)
|
stencil.load(imageNodes, 'group1')
|
stencil.load(imageNodes2, 'group2')
|
|
// konami code!
|
// 单击node节点
|
// this.graph.on('node:click', ({ e, x, y, node, view}) => {
|
// Mousetrap.bind('up', function(e) {
|
// e.preventDefault();
|
// node.getBBox().x
|
// node.getBBox().y
|
// setTimeout(()=>{
|
// node.position(node.getBBox().x,node.getBBox().y -0.5)
|
// console.log(x,y,'按下了↑键 up');
|
// },100)
|
// })
|
// Mousetrap.bind('down', function(e) {
|
// e.preventDefault();
|
// setTimeout(()=>{
|
// node.position(node.getBBox().x,node.getBBox().y+0.5)
|
// console.log(x,y,'按下了↓键 down');
|
// },100)
|
//
|
// })
|
// Mousetrap.bind('left', function(e) {
|
// e.preventDefault();
|
// setTimeout(()=>{
|
// node.position(node.getBBox().x-0.5,node.getBBox().y)
|
// console.log(x,y,'按下了←键 left');
|
// },100)
|
//
|
// })
|
// Mousetrap.bind('right', function(e) {
|
// e.preventDefault();
|
// setTimeout(()=>{
|
// node.position(node.getBBox().x+0.5,node.getBBox().y)
|
// console.log(x,y,'按下了→键 right');
|
// },100)
|
// })
|
// })
|
this.graph.bindKey(['meta+c', 'ctrl+c'], () => {
|
const cells = this.graph.getSelectedCells()
|
if (cells.length) {
|
this.graph.copy(cells)
|
}
|
return false
|
})
|
|
this.graph.bindKey(['meta+x', 'ctrl+x'], () => {
|
const cells = this.graph.getSelectedCells()
|
if (cells.length) {
|
this.graph.cut(cells)
|
}
|
return false
|
})
|
this.graph.bindKey(['meta+v', 'ctrl+v'], () => {
|
if (!this.graph.isClipboardEmpty()) {
|
const cells = this.graph.paste({offset: 32})
|
this.graph.cleanSelection()
|
this.graph.select(cells)
|
}
|
return false
|
})
|
// select all
|
this.graph.bindKey(['meta+a', 'ctrl+a'], () => {
|
const nodes = this.graph.getNodes()
|
if (nodes) {
|
this.graph.select(nodes)
|
}
|
})
|
//delete
|
this.graph.bindKey('delete', () => {
|
this.deleteCompment()
|
})
|
// zoom
|
this.graph.bindKey(['ctrl+1', 'meta+1'], () => {
|
const zoom = this.graph.zoom()
|
if (zoom < 1.5) {
|
this.graph.zoom(0.1)
|
}
|
})
|
|
this.graph.bindKey(['ctrl+2', 'meta+2'], () => {
|
const zoom = this.graph.zoom()
|
if (zoom > 0.5) {
|
this.graph.zoom(-0.1)
|
}
|
})
|
|
this.graph.on('blank:click', ({cell}) => {
|
// this.reset()
|
// this.type.value = "grid"
|
this.type = 'grid'
|
// this.id = cell.id
|
})
|
// 监听节点添加事件
|
this.graph.on('node:added', ({node}) => {
|
node.setAttrs({
|
title: {text: ''},
|
})
|
if (this.isFirstLoad) {
|
return
|
}
|
if (node.getData().isSelfCreated) {
|
return
|
}
|
const nodeType = node.getData().nodeType; // 获取节点的类型
|
const nodeObj = node
|
console.log(node.id, 'node.id')
|
let intersectNode = this.findIntersectsNode(node)
|
if (intersectNode) { // 当有节点相交 ==>并行
|
this.addBranch(intersectNode, nodeObj)
|
return
|
} else {
|
let isSelfCreated = null
|
try {
|
isSelfCreated = node.getData().isSelfCreated
|
} catch (e) {
|
}
|
if (!isSelfCreated) {
|
let intersectEdge = this.findIntersectsEdge(this.graph, node)
|
if (intersectEdge) { // 当有边相交 ==>串联
|
this.addNodeAndInsertEdge(intersectEdge, nodeObj)
|
return
|
} else {
|
//提示
|
}
|
}
|
}
|
node.remove()
|
});
|
this.graph.on('cell:contextmenu', ({cell}) => {
|
// this.type.value = cell.isNode() ? "node" : "edge"
|
this.type = cell.isNode() ? 'node' : 'edge'
|
/* this.shape = cell.shape
|
this.id = cell.id*/
|
if (this.type === 'node') {
|
//this.nodeType = cell.getData().nodeType
|
this.$refs.configNode.loadData(cell)
|
} else {
|
this.$refs.configNode.loadData(cell)
|
}
|
})
|
//单击边节点
|
this.graph.on('edge:click', ({edge}) => {
|
// this.reset()
|
// edge.attr('line/stroke', 'orange')
|
// edge.prop('labels/0', {
|
// attrs: {
|
// body: {
|
// stroke: 'orange',
|
// },
|
// },
|
//
|
// })
|
})
|
|
// 控制连接桩显示/隐藏
|
this.graph.on('node:delete', ({view, e}) => {
|
e.stopPropagation()
|
view.cell.remove()
|
})
|
|
this.graph.on('node:customevent', ({name, view, e}) => {
|
if (name === 'node:delete') {
|
e.stopPropagation()
|
view.cell.remove()
|
}
|
})
|
// 双击编辑
|
this.graph.on('cell:dblclick', ({cell, e}) => {
|
const isNode = cell.isNode()
|
const name = cell.isNode() ? 'node-editor' : 'edge-editor'
|
cell.removeTool(name)
|
cell.addTools({
|
name,
|
args: {
|
event: e,
|
attrs: {
|
backgroundColor: isNode ? '#EFF4FF' : '#FFF',
|
text: {
|
fontSize: 16,
|
fill: '#262626',
|
},
|
},
|
},
|
})
|
})
|
|
// this.graph.on('node:mouseenter', ({node}) => {
|
// const container = document.getElementById('containerImg')
|
// const ports = container.querySelectorAll(
|
// '.x6-port-body',
|
// )
|
// this.showPorts(ports, true)
|
// })
|
|
// this.graph.on('node:mouseleave', ({node}) => {
|
// // if (node.hasTool('button-remove')) {
|
// // node.removeTool('button-remove')
|
// // }
|
// const container = document.getElementById('containerImg')
|
// const ports = container.querySelectorAll(
|
// '.x6-port-body',
|
// )
|
// this.showPorts(ports, false)
|
// })
|
|
// this.graph.on('edge:mouseenter', ({cell}) => {
|
// // alert(123)
|
// cell.addTools([
|
// {
|
// name: 'source-arrowhead',
|
// },
|
// {
|
// name: 'target-arrowhead',
|
// args: {
|
// attrs: {
|
// fill: 'red',
|
// },
|
// },
|
// },
|
// {
|
// name: 'segments',
|
// args: {snapRadius: 20, attrs: {fill: '#444'}}
|
// },
|
// ])
|
// })
|
//
|
// this.graph.on('edge:mouseleave', ({cell}) => {
|
// cell.removeTools()
|
// })
|
|
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') {
|
if (node.getData().voteNum === null || node.getData().voteNum === '') {
|
this.$message({message: '表决节点的表决数量未设置', type: 'warning'})
|
return false;
|
}
|
const edges = this.graph.getIncomingEdges(node);
|
if (node.getData().voteNum >= edges.length) {
|
this.$message({message: '表决节点的表决数量必须小于该节点的进线数量', type: 'warning'})
|
return false;
|
}
|
}
|
if (node.getData().nodeType === 'switch') {
|
if (node.getData().voteNum === null || node.getData().voteNum === '') {
|
this.$message({message: '旁联节点的备份数量未设置', type: 'warning'})
|
return false;
|
}
|
const edges = this.graph.getIncomingEdges(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: '确定'
|
})
|
}
|
})
|
},
|
async layoutDiagram() {
|
if (this.dataForm.autoLayout == 1) {
|
console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
|
this.dataForm.content = JSON.stringify(this.graph.toJSON())
|
this.dataForm.urlPref = window.SITE_CONFIG['apiURL']
|
await this.$http['post'](`/taskReliability/ModelLine/layout`, this.dataForm).then(async res => {
|
if (res.msg === 'success') {
|
// this.$emit('refreshDataList')
|
// this.$alert('解析成功', '提示', {
|
// confirmButtonText: '确定'
|
// })
|
console.log(res.data, 'layoutDiagram res.data')
|
this.dataForm.content = res.data.content
|
console.log(this.dataForm.content, 'layoutDiagram dataForm.content')
|
this.diagramJson = JSON.parse(this.dataForm.content)
|
this.graph.fromJSON(this.diagramJson)
|
this.isFirstLoad = false;
|
// console.log(this.diagramJson.cells.length, 'this.diagramJson.cells.length')
|
|
this.graph.positionContent('left')
|
}
|
})
|
}
|
},
|
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 = 70
|
} 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)
|
|
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}
|
outEdges[0].source = {cell: result.newEndNode.id}
|
graphNode.remove()
|
if (this.dataForm.autoLayout == 1) {
|
if (!result.canPlace) {
|
//调用自动排版
|
this.layoutDiagram()
|
}
|
}
|
}
|
} 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
|
let maxX = graphNode.position().x - dragNode.getBBox().width / 2
|
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, centerX, centerY)
|
console.log(result, 'result111')
|
this.graph.addEdge({
|
source: {cell: graphNodeStartNode},
|
target: {cell: result.newStartNode},
|
router: {
|
name: 'manhattan',
|
args: {
|
startDirections: ['top', 'bottom'], // 从下方开始
|
endDirections: ['left'], // 向左方结束
|
},
|
},
|
connector: {name: 'rounded'},
|
zIndex: -1
|
})
|
this.graph.addEdge({
|
source: {cell: result.newEndNode},
|
target: {cell: graphNode},
|
router: {
|
name: 'manhattan',
|
args: {
|
startDirections: ['right'], // 从下方开始
|
endDirections: ['top', 'bottom'], // 向左方结束
|
},
|
},
|
connector: {name: 'rounded'},
|
zIndex: -1
|
})
|
if (this.dataForm.autoLayout == 1) {
|
if (!result.canPlace) {
|
//调用自动排版
|
this.layoutDiagram()
|
}
|
}
|
}
|
},
|
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
|
let canPlace = true;
|
if (!this.canPlace(targetNode, dragNode, {leftTopX, leftTopY, width, height})) {
|
canPlace = false
|
}
|
|
if (dragNodeType === 'node' || dragNodeType === 'dashedBox') {
|
dragNode.position(leftTopX, leftTopY)
|
return {newStartNode: dragNode, newEndNode: dragNode, canPlace: canPlace}
|
} else if (dragNodeType === 'bridgeConnection') {
|
return {
|
...this.createBridgeConnection(leftTopX, leftTopY, dragNode),
|
...{canPlace: canPlace}
|
}
|
} else {
|
return {
|
...this.createParallelBrach(leftTopX, centerY, dragNode),
|
...{canPlace: canPlace}
|
}
|
}
|
},
|
// 相交的边
|
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' || target.getData().nodeType === 'dashedBox') {
|
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 routerStart = ['right'];
|
let routerEnd = ['left'];
|
if (this.isTopBottom(graphEdge)) {
|
routerStart = ['top', 'bottom'];
|
routerEnd = ['top', 'bottom'];
|
}
|
|
let isRight = true;
|
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
|
}
|
}
|
if (isRight) {
|
if (endNode.getData()) {
|
if ("parallel,vote,bridge".indexOf(endNode.getData().nodeType) > -1) {
|
isRight = false
|
}
|
}
|
}
|
let result = this.addNodeAndConnect(null, dragNode, centerX, centerY)
|
|
if (isRight) {
|
graphEdge.target = {cell: result.newStartNode.id}
|
this.graph.addEdge({
|
source: {cell: result.newEndNode},
|
target: {cell: endNode},
|
router: {
|
name: 'manhattan',
|
args: {
|
startDirections: routerStart, // 从下方开始
|
endDirections: routerEnd, // 向左方结束
|
},
|
},
|
connector: {name: 'rounded'},
|
zIndex: -1
|
})
|
} else {
|
this.graph.addEdge({
|
source: {cell: startNode},
|
target: {cell: result.newStartNode},
|
router: {
|
name: 'manhattan',
|
args: {
|
startDirections: routerStart, // 从下方开始
|
endDirections: routerEnd, // 向左方结束
|
},
|
},
|
connector: {name: 'rounded'},
|
zIndex: -1
|
})
|
graphEdge.source = {cell: result.newEndNode.id}
|
}
|
if (this.dataForm.autoLayout == 1) {
|
if (!result.canPlace) {
|
//调用自动排版
|
this.layoutDiagram()
|
}
|
}
|
// 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)
|
this.createBrach(dragNode, connectNode, x, y - 50)
|
this.createBrach(dragNode, connectNode, x, y + 50)
|
|
return {newStartNode: connectNode, newEndNode: dragNode}
|
},
|
createBrach(dragNode, connectNode, x, y) {
|
const dashedBox = this.createDashedBox(x + 150, y)
|
dragNode.setData({startNodeId: connectNode.id})
|
|
this.graph.addEdge({
|
source: {cell: connectNode},
|
target: {cell: dashedBox},
|
router: {
|
name: 'manhattan',
|
args: {
|
startDirections: ['top', 'bottom'], // 从下方开始
|
endDirections: ['left'], // 向左方结束
|
},
|
},
|
connector: {name: 'rounded'},
|
zIndex: -1
|
})
|
this.graph.addEdge({
|
source: {cell: dashedBox},
|
target: {cell: dragNode},
|
router: {
|
name: 'manhattan',
|
args: {
|
startDirections: ['right'], // 从下方开始
|
endDirections: ['top', 'bottom'], // 向左方结束
|
},
|
},
|
connector: {name: 'rounded'},
|
zIndex: -1
|
})
|
},
|
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 leftBottomDashedBox = this.createDashedBox(x + 40, y + 160)
|
const rightBottomDashedBox = this.createDashedBox(x + 380, y + 160)
|
let edgeTop = this.graph.addEdge({
|
source: {cell: leftTopDashedBox},
|
target: {cell: rightTopDashedBox},
|
router: {
|
name: 'manhattan',
|
args: {
|
startDirections: ['right'], // 从下方开始
|
endDirections: ['left'], // 向左方结束
|
},
|
},
|
connector: {name: 'rounded'},
|
zIndex: -1
|
})
|
let edgeBottom = this.graph.addEdge({
|
source: {cell: leftBottomDashedBox},
|
target: {cell: rightBottomDashedBox},
|
router: {
|
name: 'manhattan',
|
args: {
|
startDirections: ['right'], // 从下方开始
|
endDirections: ['left'], // 向左方结束
|
},
|
},
|
connector: {name: 'rounded'},
|
zIndex: -1
|
})
|
|
const rightConnectNode = this.createBridgeNode(x + 530, y + 87, leftConnectNode.id, edgeTop.id, edgeBottom.id)
|
|
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},
|
target: {cell: leftTopDashedBox},
|
router: {
|
name: 'manhattan',
|
args: {
|
startDirections: ['top', 'bottom'],
|
endDirections: ['left'],
|
},
|
},
|
connector: {name: 'rounded'},
|
zIndex: -1
|
})
|
this.graph.addEdge({
|
source: {cell: leftConnectNode},
|
target: {cell: leftBottomDashedBox},
|
router: {
|
name: 'manhattan',
|
args: {
|
startDirections: ['top', 'bottom'], // 从下方开始
|
endDirections: ['left'], // 向左方结束
|
},
|
},
|
connector: {name: 'rounded'},
|
zIndex: -1
|
})
|
|
this.graph.addEdge({
|
source: {cell: rightTopDashedBox},
|
target: {cell: rightConnectNode},
|
router: {
|
name: 'manhattan',
|
args: {
|
startDirections: ['right'], // 从下方开始
|
endDirections: ['top', 'bottom'], // 向左方结束
|
},
|
},
|
connector: {name: 'rounded'},
|
zIndex: -1
|
})
|
this.graph.addEdge({
|
source: {cell: rightBottomDashedBox},
|
target: {cell: rightConnectNode},
|
router: {
|
name: 'manhattan',
|
args: {
|
startDirections: ['right'],
|
endDirections: ['top', 'bottom'],
|
},
|
},
|
connector: {name: 'rounded'},
|
zIndex: -1
|
})
|
|
this.graph.addEdge({
|
source: {cell: edgeTop},
|
target: {cell: alignCenterDashedBox},
|
router: {
|
name: 'manhattan',
|
args: {
|
startDirections: ['top', 'bottom'], // 从下方开始
|
endDirections: ['top', 'bottom'], // 向左方结束
|
},
|
},
|
connector: {name: 'rounded'},
|
zIndex: -1
|
})
|
this.graph.addEdge({
|
source: {cell: alignCenterDashedBox},
|
target: {cell: edgeBottom},
|
router: {
|
name: 'manhattan',
|
args: {
|
startDirections: ['top', 'bottom'], // 从下方开始
|
endDirections: ['top', 'bottom'], // 向左方结束
|
},
|
},
|
connector: {name: 'rounded'},
|
zIndex: -1
|
})
|
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: '',
|
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: '',
|
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, connectId, edgeTopId, edgeBottomId) {
|
const dragNodeId = getUUID().toString()
|
let bridgeNode = this.graph.addNode({
|
shape: 'image',
|
width: 30,
|
height: 30,
|
id: dragNodeId,
|
data: {
|
isSelfCreated: true,
|
type: 'imageNodes',
|
startNodeId: connectId,
|
edgeTopId: edgeTopId,
|
edgeBottomId: edgeBottomId,
|
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 (this.hasTopBottom(edge.getRouter().args.startDirections) && this.hasTopBottom(edge.getRouter().args.endDirections)) {
|
return true
|
}
|
return false
|
},
|
hasTopBottom(object) {
|
let result = false
|
for (let a of object) {
|
if (a == "top" || a == "bottom") {
|
result = true
|
break
|
}
|
}
|
return result
|
},
|
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>
|
#containerImg {
|
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
|
}
|
|
#containerImg .x6-graph-pagebreak>.x6-graph-pagebreak-horizontal {
|
position: absolute;
|
right: 0;
|
left: 0;
|
box-sizing: border-box;
|
height: 0;
|
border-top: none;
|
}
|
#containerImg .x6-graph-pagebreak>.x6-graph-pagebreak-vertical {
|
position: absolute;
|
top: 0;
|
bottom: 0;
|
box-sizing: border-box;
|
width: 0;
|
border-left: none;
|
}
|
</style>
|
