From d8cb08ce6b68b50d2475b70eb522ea6bbbb17686 Mon Sep 17 00:00:00 2001
From: xyc <jc_xiong@hotmail.com>
Date: 星期三, 24 七月 2024 15:26:12 +0800
Subject: [PATCH] 修改
---
web/src/views/modules/taskReliability/RBD-edit-img.vue | 1475 +++++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 1,041 insertions(+), 434 deletions(-)
diff --git a/web/src/views/modules/taskReliability/RBD-edit-img.vue b/web/src/views/modules/taskReliability/RBD-edit-img.vue
index 8ac2a3f..4b5be03 100644
--- a/web/src/views/modules/taskReliability/RBD-edit-img.vue
+++ b/web/src/views/modules/taskReliability/RBD-edit-img.vue
@@ -1,14 +1,14 @@
<template>
<div>
<el-row :gutter="[8,8]">
- <el-col :span="4">
+ <el-col :span="3">
<div :style="'height:' +left_p+'px'">
<div style="height: 100%">
<div id="stencilImg"></div>
</div>
</div>
</el-col>
- <el-col :span="20">
+ <el-col :span="21">
<div class="fa-card-a">
<el-form :inline="true">
<el-form-item>
@@ -16,7 +16,7 @@
</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="analyzeDiagram()">鎻愪氦</el-button>
<el-button type="primary" @click="clearDiagram()">娓呯┖鍥惧舰</el-button>
<el-button @click="leftAlign()">
<i style="font-size: 1rem;" class="wt-iconfont icon-zuoduiqi"></i>
@@ -37,16 +37,19 @@
<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 v-show="type === 'node'" :id="id" :diagramId="diagramId" :globalGridAttr="globalGridAttr"
- :graph="graph"
- :nodeType="nodeType"
- :projectId="projectId"
- :shape="shape"/>
- <config-edge v-show="type === 'edge'" :id="id" :globalGridAttr="globalGridAttr" :graph="graph"/>
+ <config-node ref="configNode" v-show="type === 'node'"/>
+ <config-edge ref="configEdge" v-show="type === 'edge'"/>
</div>
</el-col>
</el-row>
@@ -55,18 +58,17 @@
<script>
import {Graph, Shape, Addon, Cell} from '@antv/x6'
- import ConfigNode from './ConfigNode/index.vue'
- import ConfigEdge from './ConfigEdge/index.vue'
- import {removeCurrentTabHandle} from '@/commonJS/common'
+ 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: {
-
- },*/
props: {
projectId: {
type: String
@@ -86,8 +88,429 @@
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": "start",
+ "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": "dashedBox",
+ "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",
+ "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": 2
+ },
+ {
+ "position": {
+ "x": 600,
+ "y": 0
+ },
+ "size": {
+ "width": 60,
+ "height": 40
+ },
+ "attrs": {
+ "text": {
+ "refY": "100%",
+ "textVerticalAnchor": "top",
+ "text": "end",
+ "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"
+ },
+ "connector": {
+ "name": "rounded"
+ },
+ "source": {
+ "cell": "10000",
+ "port": "right1"
+ },
+ "target": {
+ "cell": 15000,
+ "port": "left1"
+ },
+ "zIndex": 4
+ },
+ {
+ "shape": "edge",
+ "id": "a0f3cf90-6d37-4ee0-a254-90b4ec2b6a7f",
+ "router": {
+ "name": "manhattan"
+ },
+ "connector": {
+ "name": "rounded"
+ },
+ "source": {
+ "cell": 15000,
+ "port": "right1"
+ },
+ "target": {
+ "cell": "20000",
+ "port": "left1"
+ },
+ "zIndex": 5
+ }
+ ]
+ }
+ `
+ return JSON.parse(result)
+ }
+ },
data() {
return {
+ nodeX:'',
+ nodeY:'',
isFirstLoad: true,
hasMoveNode: false,
hasMoveSingleNode: null,
@@ -98,67 +521,45 @@
modelType: '',
timer: null,
imagesList: [
- {imgPath: 'start', imgName: 'start', nodeType: 'start', imgWidth: 60, imgHeight: 60, imgId: '1', data: {}},
- {imgPath: 'end', imgName: 'end', nodeType: 'end', imgWidth: 60, imgHeight: 60, imgId: '2', data: {}},
- {
- imgPath: 'connect',
- imgName: 'connect',
- nodeType: 'connect',
- imgWidth: 30,
- imgHeight: 30,
- imgId: '3',
- data: {}
- },
- {
- imgPath: 'connect',
- imgName: 'bridge',
- nodeType: 'bridge',
- imgWidth: 50,
- imgHeight: 50,
- imgId: '12',
- data: {}
- },
- {
- imgPath: 'switch',
- imgName: 'switch',
- nodeType: 'switch',
- imgWidth: 60,
- imgHeight: 60,
- imgId: '5',
- data: {}
- },
{
imgPath: 'parallel',
imgName: 'parallel',
nodeType: 'parallel',
- imgWidth: 60,
- imgHeight: 60,
+ imgWidth: 50,
+ imgHeight: 50,
imgId: '9',
data: {}
},
- {imgPath: 'vote', imgName: 'vote', nodeType: 'vote', imgWidth: 60, imgHeight: 60, imgId: '6', data: {}},
+ {imgPath: 'vote', imgName: 'vote', nodeType: 'vote', imgWidth: 50, imgHeight: 50, imgId: '6', data: {}},
{
- imgPath: 'dashedBox',
- imgName: 'dashedBox',
- nodeType: 'dashedBox',
- imgWidth: 60,
- imgHeight: 60,
- imgId: '10000',
+ imgPath: 'switch',
+ imgName: 'switch',
+ nodeType: 'switch',
+ imgWidth: 50,
+ imgHeight: 50,
+ imgId: '5',
data: {}
},
{
imgPath: 'bridgeConnection',
imgName: 'bridgeConnection',
nodeType: 'bridgeConnection',
- imgWidth: 60,
- imgHeight: 60,
+ imgWidth: 50,
+ imgHeight: 50,
imgId: '10',
data: {}
},
+ // {
+ // imgPath: 'dashedBox',
+ // imgName: 'dashedBox',
+ // nodeType: 'dashedBox',
+ // imgWidth: 60,
+ // imgHeight: 60,
+ // imgId: '10000',
+ // data: {}
+ // },
],
- imagesList2: [
- // {imgPath:'logo',imgName:'logo',nodeType:'node',,nodeTypeExt:'',productType:'',statusImg:'',imgWidth:60,imgHeight:60,imgId:'100',dataId:'123456'},
- ],
+ imagesList2: [],
nodeType: '',
first: true,
shape: '',
@@ -170,33 +571,16 @@
diagramIdDisabled: false,
dataForm: {
id: null,
+ pid: null,
+ model_tag: '',
+ model_name: '',
+ product_id: null,
content: null,
publishContent: null,
hasPublish: 0,
urlPref: '',
+ nodeArr: []
},
- // emptyJson: {
- // // 鑺傜偣
- // nodes: [
- // {
- // id: 'node1', // String锛屽彲閫夛紝鑺傜偣鐨勫敮涓�鏍囪瘑
- // width: 500, // Number锛屽彲閫夛紝鑺傜偣澶у皬鐨� width 鍊�
- // height: 300, // Number锛屽彲閫夛紝鑺傜偣澶у皬鐨� height 鍊�
- // label: '璇ラ」鐩繕鏈厤缃巶瀹剁綉缁滃浘',
- // attrs: {
- // body: {
- // strokeWidth: 0
- // },
- // }
- // // text: {
- // // text: '璇ラ」鐩繕鏈紪鍒剁綉缁滃浘',
- // // // fontSize: 56,
- // // fill: 'rgba(0,0,0,0.7)'
- // // },
- // // },
- // }
- // ],
- // },
type: '',
id: '',
graph: null,
@@ -204,10 +588,12 @@
productType: '',
voteNum: '',
repairMttcr: '',
- repairMttcrOther: '',
+ repairMttcrOtherParams2: '',
+ repairMttcrOtherParams3: '',
repairDistribType: '',
reliabDistribType: '',
- taskMtbcfOther: '',
+ taskMtbcfOtherParams2: '',
+ taskMtbcfOtherParams3: '',
isRepair: 0,
taskMtbcf: '',
numberInputValue: '',
@@ -364,14 +750,12 @@
token: Cookies.get('token'),
}
let res = await this.$http.get(`/taskReliability/ModelLine/getDiagram`, {params: params})
- if (res.data !== null && (res.data.content != null)) {
- this.dataForm = res.data
+ this.dataForm = res.data
+ 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)
- if (this.diagramJson.cells.length !== 0) {
- this.graph.fromJSON(this.diagramJson)
- } else {
- this.initCells()
- }
+ this.graph.fromJSON(this.diagramJson)
this.isFirstLoad = false;
console.log(this.diagramJson.cells.length, 'this.diagramJson.cells.length')
@@ -379,13 +763,16 @@
// this.graph.centerContent()
// this.graph.zoomToFit()
} else {
- await this.clearDiagram()
+ this.graph.fromJSON(this.RBDDefault)
+ this.isFirstLoad = false
}
},
async clearDiagram() {
- this.dataForm.id = null
// this.graph.fromJSON(this.emptyJson)
- this.graph.fromJSON('')
+ 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()
@@ -412,9 +799,6 @@
}
},
},
- // panning: {
- // enabled: true,
- // },
scroller: {
enabled: true,
pageVisible: true,
@@ -435,9 +819,6 @@
connecting: {
router: {
name: 'manhattan',
- // args: {
- // padding: 1,
- // },
},
connector: {
name: 'rounded',
@@ -448,6 +829,7 @@
anchor: 'center',
connectionPoint: 'anchor',
allowBlank: false,
+ allowLoop:false, // 鏄惁鍏佽鍒涘缓寰幆杩炵嚎锛屽嵆杈圭殑璧峰鑺傜偣鍜岀粓姝㈣妭鐐逛负鍚屼竴鑺傜偣锛岄粯璁や负 true
snap: {
radius: 20,
},
@@ -455,9 +837,10 @@
return new Shape.Edge({
attrs: {
line: {
+ // sourceMarker: 'block', // 瀹炲績绠ご
stroke: '#A2B1C3',
strokeWidth: 2,
- targetMarker: {fill: 'none'}
+ targetMarker: null
}
},
labels: [{
@@ -520,7 +903,7 @@
getDropNode: (node) => {
const {width, height} = node.size()
if (node.getData().type && node.getData().nodeType === 'dashedBox') {
- return node.clone().size(100, 80)
+ return node.clone().size(60, 40)
}
if (node.getData().type && node.getData().type === 'imageNodes2') {
return node.clone({keepId: true})
@@ -546,7 +929,7 @@
{
title: '杩愮畻绗﹀彿',
name: 'group1',
- graphHeight: 360,
+ graphHeight: 200,
},
{
title: '璁惧鑺傜偣',
@@ -604,33 +987,45 @@
}
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}`,
+ //imageUrl: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=${item.imgPath}`,
width: 60,
height: 60,
id: item.dataId, // 鎵嬪姩璁剧疆鑺傜偣鐨� ID
data: {
type: 'imageNodes2',
- isRepair: item.isRepair,
dataId: item.dataId,
nodeType: item.nodeType,
nodeTypeExt: item.nodeTypeExt,
productType: item.productType,
statusImg: item.statusImg,
- reliabDistribType: item.reliabDistribType,
- repairDistribType: item.repairDistribType,
- repairMttcr: item.repairMttcr,
- repairMttcrOther: item.repairMttcrOther,
+
+ reliabDistribType: item.reliabDistribType ? item.reliabDistribType : 1,
taskMtbcf: item.taskMtbcf,
- taskMtbcfOther: item.taskMtbcfOther,
+ taskMtbcfOther2: item.taskMtbcfOtherParams2,
+ taskMtbcfOther3: item.taskMtbcfOtherParams3,
+
+ isRepair: item.isRepair,
+ repairDistribType: item.repairDistribType ? item.repairDistribType : 1,
+ repairMttcr: item.repairMttcr,
+ repairMttcrOther2: item.repairMttcrOtherParams2,
+ repairMttcrOther3: item.repairMttcrOtherParams3,
+
imgHeight: item.imgHeight,
imgWidth: item.imgWidth,
voteNum: '',
},
attrs: {
+ image: {
+ 'xlink:href': `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getSvgImage?token=${Cookies.get('token')}&id=${item.imgPath}`,
+ //'xlink:href': urlObject.createObjectURL(new Blob([item.svgContent])),
+ },
text: {
text: item.imgName,
fontSize: 14,
@@ -671,6 +1066,42 @@
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) {
@@ -694,21 +1125,6 @@
}
return false
})
-//undo redo
- this.graph.bindKey(['meta+z', 'ctrl+z'], () => {
- if (this.graph.history.canUndo()) {
- this.graph.history.undo()
- }
- return false
- })
-
- this.graph.bindKey(['meta+shift+z', 'ctrl+shift+z'], () => {
- if (this.graph.history.canRedo()) {
- this.graph.history.redo()
- }
- return false
- })
-
// select all
this.graph.bindKey(['meta+a', 'ctrl+a'], () => {
const nodes = this.graph.getNodes()
@@ -718,70 +1134,7 @@
})
//delete
this.graph.bindKey('delete', () => {
- const cells = this.graph.getSelectedCells()
- console.log(cells,'cells')
- if (cells.length === 1) {
- this.$confirm('鏄惁鍒犻櫎璇ヨ妭鐐�?', '鎻愮ず', {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- type: 'warning'
- }).then(() => {
- let node = cells[0]
- if (!node.isNode()){
- this.$message({message: '璇烽�変腑鑺傜偣', type: 'warning'})
- return false; // 鍙栨秷鎿嶄綔
- }
- let nodeType = node.getData().nodeType
- let canDelete = false
- if (nodeType==='start' || nodeType==='end'){
- this.$message({message: '鏃犳硶鍒犻櫎璧峰鍜岀粨鏉熻妭鐐�', type: 'warning'})
- return false; // 鍙栨秷鎿嶄綔
- }
- if(nodeType === 'node' || nodeType ==='dashedBox'){
- let isSeriesNode = this.isSeriesNode(node)
- if (isSeriesNode){
- //鍒犳帀锛屽墠鍚庣嚎杩炶捣鏉�
- this.graph.addEdge({
- source: {cell: isSeriesNode.inNode, port: 'right1'},
- target: {cell: isSeriesNode.outNode, port: 'left1'},
- router: {name: 'manhattan'},
- connector: {name: 'rounded'}
- })
- node.remove()
- return
- }
- if (this.isMultipleBrach(node)){
- //鐩存帴鍒犳帀锛屼笉鐢ㄧ绾�
- return
- }else{
- //鎻愮ず杩欎釜缁勫悎鍙湁涓�鏉′箣璺紝鍦ㄧ粍鍚堢偣鍒犻櫎
- return
- }
- }
- if (nodeType==='connect'){
- try{
- let endNodeId = node.getData().endNodeId
- // 鎻愮ず涓嶈兘鐩存帴鍒犻櫎宸﹁繛鎺ョ偣
- return
- }catch(e){}
- }
- //鍋氫釜杩唬鍒犻櫎鏁翠釜缁勫悎
- //this.deleteCombination();
-
- // this.graph.removeCells(cells)
- this.$message({
- type: 'success',
- message: '鍒犻櫎鎴愬姛!'
- })
- }).catch(() => {
- this.$message({
- type: 'info',
- message: '宸插彇娑堝垹闄�'
- })
- })
- }else{
-
- }
+ this.deleteCompment()
})
// zoom
this.graph.bindKey(['ctrl+1', 'meta+1'], () => {
@@ -799,7 +1152,7 @@
})
this.graph.on('blank:click', ({cell}) => {
- this.reset()
+ // this.reset()
// this.type.value = "grid"
this.type = 'grid'
// this.id = cell.id
@@ -818,6 +1171,7 @@
let intersectNode = this.findIntersectsNode(node)
if (intersectNode) { // 褰撴湁鑺傜偣鐩镐氦 ==>骞惰
this.addBranch(intersectNode, nodeObj)
+ return
} else {
let isSelfCreated = null
try {
@@ -828,52 +1182,40 @@
let intersectEdge = this.findIntersectsEdge(this.graph, node)
if (intersectEdge) { // 褰撴湁杈圭浉浜� ==>涓茶仈
this.addNodeAndInsertEdge(intersectEdge, nodeObj)
+ return
} else {
//鎻愮ず
}
}
}
-
-
- /*//濡傛灉鑺傜偣涓庤妭鐐圭浉浜�
- console.log(node.position().x, node.position().x, 'node.position().x')
- if (nodeType === 'bridgeConnection') {
- this.getBridgeConnection()
- }*/
+ node.remove()
});
- // 鐩戝惉鑺傜偣浣嶇疆鏀瑰彉浜嬩欢
- this.graph.on('node:change:position', ({node}) => {
- this.hasMoveNode = true
- this.hasMoveSingleNode = node
- });
- this.graph.on('cell:click', ({cell}) => {
+ 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
+ /* this.shape = cell.shape
+ this.id = cell.id*/
if (this.type === 'node') {
- this.nodeType = cell.getData().nodeType
- // console.log(this.nodeType, cell.id, 'this.nodeType')
+ //this.nodeType = cell.getData().nodeType
+ this.$refs.configNode.loadData(cell)
+ } else {
+ this.$refs.configNode.loadData(cell)
}
- // console.log(this.shape, 'this.shape')
- // this.nodeOpt(this.id, this.globalGridAttr)
})
//鍗曞嚮杈硅妭鐐�
this.graph.on('edge:click', ({edge}) => {
- this.reset()
- edge.attr('line/stroke', 'orange')
- edge.prop('labels/0', {
- attrs: {
- body: {
- stroke: 'orange',
- },
- },
+ // this.reset()
+ // edge.attr('line/stroke', 'orange')
+ // edge.prop('labels/0', {
+ // attrs: {
+ // body: {
+ // stroke: 'orange',
+ // },
+ // },
+ //
+ // })
+ })
- })
- })
- // 鍗曞嚮node鑺傜偣
- this.graph.on('node:click', ({node}) => {
- })
// 鎺у埗杩炴帴妗╂樉绀�/闅愯棌
this.graph.on('node:delete', ({view, e}) => {
e.stopPropagation()
@@ -975,28 +1317,185 @@
})
})
},
+ 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: '纭畾'
})
@@ -1116,7 +1615,7 @@
for (const otherNode of nodes) {
if (otherNode === node) continue;
let nodeType = otherNode.getData().nodeType
- if (nodeType === "parallel" || nodeType === "switch" || nodeType === "vote" || nodeType === "end" || nodeType === "dashedBox") {
+ 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 &&
@@ -1139,15 +1638,17 @@
let graphNodeType = graphNode.getData().nodeType
let dragNodeType = dragNode.getData().nodeType
- let offHeight = 60
+ let offHeight = 50
if (dragNodeType === 'node') {
offHeight = 60
} else if (dragNodeType === 'bridgeConnection') {
- offHeight = 230
+ offHeight = 175
} else {
offHeight = 70
}
- if (graphNodeType === 'dashedBox') {
+ 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
@@ -1162,11 +1663,27 @@
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()
- let centerY = graphNode.position().y
- this.addNodeAndConnect(startNode, endNode, dragNode, centerY)
}
- } else {
+ } else { //骞惰缁撴瀯
const graphNodeStartNodeId = graphNode.getData().startNodeId // 鑾峰彇鐢诲竷涓婂師鏈夎妭鐐圭殑寮�濮婭D
const graphNodeStartNode = this.graph.getCellById(graphNodeStartNodeId) // 閫氳繃寮�濮婭D寰楀埌鍒濆鑺傜偣瀵硅薄
let graphNodeY = graphNode.position().y - graphNode.getBBox().height / 2 // 鑾峰彇鐢诲竷鍘熸湁鑺傜偣鐨剏鍧愭爣
@@ -1174,161 +1691,145 @@
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锛宮axY
-
let pointXY = {minY: minY, maxY: maxY}
console.log(pointXY, 'old')
this.getYRange(inEdges, graphNodeStartNode, pointXY)
console.log(pointXY, 'new')
- let centerY = graphNodeY - pointXY.minY > pointXY.maxY - graphNodeY ? pointXY.maxY + 30 : pointXY.minY - offHeight - 30
+ 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
- this.addNodeAndConnect(graphNodeStartNode, graphNode, dragNode, centerY)
+ 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(startNode, endNode, dragNode, centerY) { // graphCell鏄敾甯冧笂鍘熸湁鐨勮妭鐐广�俤ragNode鏄綋鍓嶆嫋鎷界殑鑺傜偣
- let minX = startNode.position().x + startNode.getBBox().width
- let maxX = endNode.position().x
-
- let centerX = minX + (maxX - minX) / 2
+ addNodeAndConnect(targetNode, dragNode, centerX, centerY) { // graphCell鏄敾甯冧笂鍘熸湁鐨勮妭鐐广�俤ragNode鏄綋鍓嶆嫋鎷界殑鑺傜偣
+ let width = 100,
+ height = 80,
+ leftTopX = centerX,
+ leftTopY = centerY
let dragNodeType = dragNode.getData().nodeType
- if (dragNodeType === 'node' || dragNodeType === 'dashedBox') {
- dragNode.position(minX + 50, centerY);
- this.graph.addEdge({
- source: {cell: startNode, port: 'right1'},
- target: {cell: dragNode, 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'}
- })
+ if (dragNodeType === 'node') {
+ width = 60
+ height = 60
+ } else if (dragNodeType === 'dashedBox') {
+ width = 60
+ height = 40
} else if (dragNodeType === 'bridgeConnection') {
- this.createBridgeConnection(minX, centerY, startNode, endNode, dragNode)
+ width = 550
+ height = 175
} else {
- this.createParallelBrach(minX, centerY, startNode, endNode, dragNode)
+ width = 270
+ height = 60
+ }
+ 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) {
- graphEdge.remove()
- let centerY = startNode.position().y
- this.addNodeAndConnect(startNode, endNode, dragNode, centerY)
+ 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()
}
- },
- initCells() {
- const startNode = this.graph.addNode({
- shape: 'image',
- // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
- width: 60,
- height: 60,
- id: '10000',
- data: {
- type: 'imageNodes',
- endNodeId: '20000',
- dataId: '',
- nodeType: 'start',
- nodeTypeExt: '',
- voteNum: ''
- },
- attrs: {
- image: {
- 'xlink:href': '/modelImg/start.svg',
- },
- text: {
- text: 'start',
- fontSize: 14,
- refX: 0.5,
- refY: '100%',
- refY2: 4,
- textAnchor: 'middle',
- textVerticalAnchor: 'top',
- },
- },
- ports: {...this.ports},
- })
- const dashedBox = this.graph.addNode({
- shape: 'image',
- // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
- width: 100,
- height: 80,
- id: 15000,
- data: {
- 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},
- })
- const endNode = this.graph.addNode({
- shape: 'image',
- width: 60,
- height: 60,
- id: '20000',
- data: {
- type: 'imageNodes',
- startNodeId: '10000',
- dataId: '',
- nodeType: 'end',
- nodeTypeExt: '',
- voteNum: ''
- },
- attrs: {
- image: {
- 'xlink:href': '/modelImg/end.svg',
- },
- text: {
- text: 'end',
- fontSize: 14,
- refX: 0.5,
- refY: '100%',
- refY2: 4,
- textAnchor: 'middle',
- textVerticalAnchor: 'top',
- },
- },
- ports: {...this.ports},
- })
- startNode.position(-600, 0);
- dashedBox.position(0, (startNode.size().height - dashedBox.size().height) / 2);
- endNode.position(600, 0);
- this.graph.addEdge({
- source: {cell: startNode, port: 'right1'},
- target: {cell: dashedBox, port: 'left1'},
- router: {name: 'manhattan'},
- connector: {name: 'rounded'}
- })
- this.graph.addEdge({
- source: {cell: dashedBox, port: 'right1'},
- target: {cell: endNode, port: 'left1'},
- router: {name: 'manhattan'},
- connector: {name: 'rounded'}
- })
},
findIntersectsEdge(graph, node) {
const edges = graph.getEdges()
@@ -1354,7 +1855,7 @@
return false
}
},
- createParallelBrach(x, y, startNode, endNode, dragNode) {
+ 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)
@@ -1372,105 +1873,107 @@
router: {name: 'manhattan'},
connector: {name: 'rounded'}
})
-
- 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'}
- })
+ 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, startNode, endNode, dragNode) {
- const leftTopDashedBox = this.createDashedBox(x + 120, y)
- const rightTopDashedBox = this.createDashedBox(x + 400, y)
+ 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 + 50, y + 80)
- const alignCenterDashedBox = this.createDashedBox(x + 260, y + 80)
- const rightConnectNode = this.createBridgeNode(x + 550, y + 80)
+ 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 + 120, y + 160)
- const rightBottomDashedBox = this.createDashedBox(x + 400, y + 160)
+ 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: 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'}
+ connector: {name: 'rounded'},
})
this.graph.addEdge({
source: {cell: leftConnectNode, port: 'right1'},
target: {cell: leftBottomDashedBox, port: 'left1'},
router: {name: 'manhattan'},
- connector: {name: 'rounded'}
+ connector: {name: 'rounded'},
})
let edgeTop = this.graph.addEdge({
source: {cell: leftTopDashedBox, port: 'right1'},
target: {cell: rightTopDashedBox, port: 'left1'},
router: {name: 'manhattan'},
- connector: {name: 'rounded'}
+ connector: {name: 'rounded'},
})
let edgeBottom = this.graph.addEdge({
source: {cell: leftBottomDashedBox, port: 'right1'},
target: {cell: rightBottomDashedBox, port: 'left1'},
router: {name: 'manhattan'},
- connector: {name: 'rounded'}
+ connector: {name: 'rounded'},
})
this.graph.addEdge({
source: {cell: rightTopDashedBox, port: 'right1'},
target: {cell: rightConnectNode, port: 'left1'},
router: {name: 'manhattan'},
- connector: {name: 'rounded'}
+ connector: {name: 'rounded'},
})
this.graph.addEdge({
source: {cell: rightBottomDashedBox, port: 'right1'},
target: {cell: rightConnectNode, port: 'left1'},
router: {name: 'manhattan'},
- connector: {name: 'rounded'}
+ connector: {name: 'rounded'},
})
this.graph.addEdge({
source: {cell: edgeTop},
- target: {cell: alignCenterDashedBox},
+ target: {cell: alignCenterDashedBox, port: 'top1'},
router: {name: 'manhattan'},
connector: {name: 'rounded'},
})
this.graph.addEdge({
- source: {cell: alignCenterDashedBox},
+ 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: 100,
- height: 60,
+ width: 60,
+ height: 40,
id: dashId,
data: {
isSelfCreated: true,
@@ -1504,9 +2007,8 @@
const dragNodeId = getUUID().toString()
let connectNode = this.graph.addNode({
shape: 'image',
- // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
- width: 30,
- height: 30,
+ width: 10,
+ height: 10,
id: connectId,
data: {
isSelfCreated: true,
@@ -1539,10 +2041,10 @@
createBridgeNode(x, y) {
const connectId = getUUID().toString()
const dragNodeId = getUUID().toString()
- let connectNode = this.graph.addNode({
+ let bridgeNode = this.graph.addNode({
shape: 'image',
- width: 50,
- height: 50,
+ width: 30,
+ height: 30,
id: connectId,
data: {
isSelfCreated: true,
@@ -1569,8 +2071,8 @@
},
ports: {...this.ports},
})
- connectNode.position(x, y - connectNode.size().height / 2)
- return connectNode
+ bridgeNode.position(x, y - bridgeNode.size().height / 2)
+ return bridgeNode
},
getYRange(inEdges, startNode, pointXY) {
for (let inEdge of inEdges) {
@@ -1590,55 +2092,160 @@
this.getYRange(inEdgesPrev, startNode, pointXY)
}
},
- isSeriesNode(node){
+ isSeriesNode(startNode, endNode) {
let result = false
let inNode = null
let outNode = null
- let inEdges = this.getInLinesOfNode(node)
- if (inEdges.length === 1){
- let inEdgeId = inEdges[0].id
- let isLineToLine = this.isLineToLine(inEdgeId)
+ 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)
- let inNodeType = inNode.getData().nodeType
- if (!isLineToLine && 'node,parallel,switch,vote'.indexOf(inNodeType)>-1){
- result = true
+ 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(node)
- if (outEdges.length === 1){
- let outEdgeId = inEdges[0].id
- let isLineToLine = this.isLineToLine(outEdgeId)
- let outNodeId = inEdges[0].target.cell
+ 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)
- let outNodeType = outNode.getData().nodeType
- if (!isLineToLine && 'node,connect'.indexOf(outNodeType)>-1){
- result = true
+ if (!isMyLineToOtherLine && !hasOtherLineToMyLine) {
+ let outNodeType = outNode.getData().nodeType
+ if ('node,connect,dashedBox'.indexOf(outNodeType) > -1) {
+ result = true
+ }
}
}
- if (result && inNode && outNode){
- return {inNode,outNode}
- }else {
+ console.log(result, 'result')
+ if (result && inNode && outNode) {
+ console.log(inNode, outNode, 'inNode, outNode')
+ return {inNode, outNode}
+ } else {
return false
}
},
- isLineToLine(edgeId){
- for(let edge of this.graph.getEdges()){
+ hasOtherLineToMyLine(edgeId) {
+ for (let edge of this.graph.getEdges()) {
if (edge.source.cell === edgeId || edge.target.cell === edgeId)
return true
}
return false
},
- isMultipleBrach(){},
- deleteCombination(){},
+ 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>
--
Gitblit v1.9.1