From 7b02e5ed98cab7df7c52949c5bba298d1060329b Mon Sep 17 00:00:00 2001
From: xyc <jc_xiong@hotmail.com>
Date: 星期四, 09 五月 2024 14:50:18 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
web/src/views/modules/taskReliability/RBD-edit-img.vue | 1420 +++++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 1,099 insertions(+), 321 deletions(-)
diff --git a/web/src/views/modules/taskReliability/RBD-edit-img.vue b/web/src/views/modules/taskReliability/RBD-edit-img.vue
index e0698fb..8984205 100644
--- a/web/src/views/modules/taskReliability/RBD-edit-img.vue
+++ b/web/src/views/modules/taskReliability/RBD-edit-img.vue
@@ -1,69 +1,45 @@
<template>
<div>
<el-row :gutter="[8,8]">
- <el-col :span="4">
+ <el-col :span="3">
<div :style="'height:' +left_p+'px'">
- <div class="fa-card-a" style="height: 100%">
+ <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>
- 妯″瀷鍚嶇О锛歿{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-form-item>
- <el-form-item>
- <el-tooltip class="item" effect="dark" content="宸﹀榻�" placement="left">
- <el-button class="" style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF;"
- @click="leftAlign()"><i style="font-size: 2rem;"
- class="wt-iconfont icon-zuoduiqi"></i></el-button>
- </el-tooltip>
+ 妯″瀷鍚嶇О锛歿{ modelName }}
</el-form-item>
<el-form-item>
- <el-tooltip class="item" effect="dark" content="灞呬腑瀵归綈" placement="left">
- <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"
- @click="centerAlign()"><i style="font-size: 2rem;"
- class="wt-iconfont icon-chuizhiduiqi"></i></el-button>
- </el-tooltip>
- </el-form-item>
- <el-form-item>
- <el-tooltip class="item" effect="dark" content="鍙冲榻�" placement="left">
- <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"
- @click="rightAlign()"><i style="font-size: 2rem;"
- class="wt-iconfont icon-youduiqi"></i></el-button>
- </el-tooltip>
- </el-form-item>
- <el-form-item>
- <el-tooltip class="item" effect="dark" content="椤堕儴瀵归綈" placement="left">
- <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"
- @click="topAlign()"><i style="font-size: 2rem;"
- class="wt-iconfont icon-dingduiqi"></i></el-button>
- </el-tooltip>
- </el-form-item>
- <el-form-item>
- <el-tooltip class="item" effect="dark" content="姘村钩瀵归綈" placement="left">
- <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"
- @click="shuipingAlign()"><i style="font-size: 2rem;"
- class="wt-iconfont icon-shuipingduiqi"></i></el-button>
- </el-tooltip>
- </el-form-item>
- <el-form-item>
- <el-tooltip class="item" effect="dark" content="搴曢儴瀵归綈" placement="left">
- <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"
- @click="bottomAlign()"><i style="font-size: 2rem;"
- class="wt-iconfont icon-diduiqi"></i></el-button>
- </el-tooltip>
+ <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-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>
<div id="containerImg" style="border: 1px solid #EAEBEE;border-radius: 6px;
- box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);">
+ 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"
@@ -83,6 +59,8 @@
import ConfigEdge from './ConfigEdge/index.vue'
import {removeCurrentTabHandle} from '@/commonJS/common'
import {setHartBeat} from '@/commonJS/common';
+ import Cookies from 'js-cookie'
+ import {getUUID} from '../../../../packages/utils'
export default {
name: 'RBD-edit-img',
@@ -110,23 +88,78 @@
},
data() {
return {
+ isFirstLoad: true,
+ hasMoveNode: false,
+ hasMoveSingleNode: null,
+ nodeAdded: false,
+ connectNode: {},
modelId: '',
modelName: '',
- modelType:'',
+ modelType: '',
timer: null,
- imgsList:[
- {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:20,imgHeight:20,imgId:'3',data:{}},
- // {imgPath:'parallelLeft',imgName:'parallelLeft',nodeType:'parallelLeft',imgWidth:60,imgHeight:60,imgId:'3',data:{}},
- // {imgPath:'parallelRight',imgName:'parallel',nodeType:'parallel',imgWidth:60,imgHeight:60,imgId:'4',data:{}},
- {imgPath:'switchRight',imgName:'switch',nodeType:'switch',imgWidth:60,imgHeight:60,imgId:'5',data:{}},
- {imgPath:'voteRight',imgName:'vote',nodeType:'vote',imgWidth:60,imgHeight:60,imgId:'6',data:{}},
+ 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: 'parallel',
+ imgName: 'parallel',
+ nodeType: 'parallel',
+ imgWidth: 60,
+ imgHeight: 60,
+ imgId: '9',
+ data: {}
+ },
+ {imgPath: 'vote', imgName: 'vote', nodeType: 'vote', imgWidth: 60, imgHeight: 60, imgId: '6', data: {}},
+ {
+ imgPath: 'switch',
+ imgName: 'switch',
+ nodeType: 'switch',
+ imgWidth: 60,
+ imgHeight: 60,
+ imgId: '5',
+ data: {}
+ },
+ {
+ imgPath: 'bridgeConnection',
+ imgName: 'bridgeConnection',
+ nodeType: 'bridgeConnection',
+ imgWidth: 60,
+ imgHeight: 60,
+ imgId: '10',
+ data: {}
+ },
+ {
+ imgPath: 'dashedBox',
+ imgName: 'dashedBox',
+ nodeType: 'dashedBox',
+ imgWidth: 60,
+ imgHeight: 60,
+ imgId: '10000',
+ data: {}
+ },
],
- imgsList2:[
- // {imgPath:'logo',imgName:'logo',nodeType:'node',,nodeTypeExt:'',productType:'',statusImg:'',imgWidth:60,imgHeight:60,imgId:'100',dataId:'123456'},
+ imagesList2: [
+ // {imgPath:'logo',imgName:'logo',nodeType:'node',,nodeTypeExt:'',productType:'',statusImg:'',imgWidth:60,imgHeight:60,imgId:'100',dataId:'123456'},
],
- nodeType:'',
+ nodeType: '',
first: true,
shape: '',
projectList: [],
@@ -140,6 +173,7 @@
content: null,
publishContent: null,
hasPublish: 0,
+ urlPref: '',
},
// emptyJson: {
// // 鑺傜偣
@@ -167,17 +201,18 @@
id: '',
graph: null,
globalGridAttr: {
- voteSum:'',
- repairMttcr:'',
- repairMttcrOther:'',
- repairDistribType:'',
- reliabDistribType:'',
- taskMtbcfOther:'',
- isRepair:0,
- taskMtbcf:'',
- numberInputValue:'',
- statusImg:'',
- nodeTypeExt:'',
+ productType: '',
+ voteNum: '',
+ repairMttcr: '',
+ repairMttcrOther: '',
+ repairDistribType: '',
+ reliabDistribType: '',
+ taskMtbcfOther: '',
+ isRepair: 0,
+ taskMtbcf: '',
+ numberInputValue: '',
+ statusImg: '',
+ nodeTypeExt: '',
type: 'mesh',
size: 10,
color: '#e5e5e5',
@@ -194,7 +229,8 @@
stroke: '#5F95FF',
strokeWidth: 1,
- connector: 'normal',
+ connector: 'rounded',
+ router: 'manhattan',
label: '',
nodeStroke: '#5F95FF',
nodeStrokeWidth: 1,
@@ -213,11 +249,11 @@
},
isReady: false,
curCel: Cell,
- left_p: document.documentElement.clientHeight-100,
+ left_p: document.documentElement.clientHeight - 100,
ports: {
groups: {
top: {
- position: 'top',
+ position: {name: 'top'},
attrs: {
circle: {
r: 4,
@@ -232,7 +268,7 @@
},
},
right: {
- position: 'right',
+ position: {name: 'right'},
attrs: {
circle: {
r: 4,
@@ -247,7 +283,7 @@
},
},
bottom: {
- position: 'bottom',
+ position: {name: 'bottom'},
attrs: {
circle: {
r: 4,
@@ -262,7 +298,7 @@
},
},
left: {
- position: 'left',
+ position: {name: 'left'},
attrs: {
circle: {
r: 4,
@@ -279,15 +315,19 @@
},
items: [
{
+ id: 'top1',
group: 'top',
},
{
+ id: 'right1',
group: 'right',
},
{
+ id: 'bottom1',
group: 'bottom',
},
{
+ id: 'left1',
group: 'left',
},
],
@@ -308,39 +348,46 @@
this.type = 'grid'
},
methods: {
- init(row){
+ 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){')
+ console.log(this.dataForm, 'init(row){')
},
async getDiagram(modelId) {
+ this.isFirstLoad = true;
let params = {
- modelId : modelId
+ modelId: modelId,
+ urlPref: window.SITE_CONFIG['apiURL'],
+ token: Cookies.get('token'),
}
- let res = await this.$http.get(`/taskReliability/ModelLine/getDiagram`, {params: params})
- console.log(res,'async getDiagram( res')
- if (res.data !== null && res.data.content != null) {
- this.dataForm = res.data
- console.log(this.dataForm, 'this.dataForm in getDiagram')
- this.diagramJson = JSON.parse(this.dataForm.content)
- // console.log(this.dataForm.content,'this.Diagram content')
- console.log(this.diagramJson, 'this.Diagram json')
+ let res = await this.$http.get(`/taskReliability/ModelLine/getDiagram`, {params: params})
+ if (res.data !== null && (res.data.content != null)) {
+ this.dataForm = res.data
+ this.diagramJson = JSON.parse(this.dataForm.content)
+ if (this.diagramJson.cells.length !== 0) {
this.graph.fromJSON(this.diagramJson)
- this.graph.centerContent()
- this.graph.zoomToFit()
} else {
- await this.clearDiagram()
+ this.initCells()
}
+ this.isFirstLoad = false;
+ console.log(this.diagramJson.cells.length, 'this.diagramJson.cells.length')
+
+ this.graph.positionContent('left')
+ // this.graph.centerContent()
+ // this.graph.zoomToFit()
+ } else {
+ await this.clearDiagram()
+ }
},
async clearDiagram() {
this.dataForm.id = null
// this.graph.fromJSON(this.emptyJson)
this.graph.fromJSON('')
- this.graph.centerContent()
- this.graph.zoomToFit()
+ // this.graph.centerContent()
+ // this.graph.zoomToFit()
// this.graph.freeze()
},
async initDigram(productId) {
@@ -355,41 +402,39 @@
grid: {
visible: true,
},
- onToolItemCreated({tool}) {
- const handle = tool
- const options = handle.options
- if (options && options.index % 2 === 1) {
- tool.setAttrs({fill: 'red'})
- }
- },
autoResize: true,
- history: true,
+ history: {
+ enabled: true,
+ beforeAddCommand(event, args) {
+ if (args.key === 'tools') {
+ // console.log(args.key, 'event, args')
+ return false
+ }
+ },
+ },
// panning: {
// enabled: true,
// },
scroller: {
enabled: true,
pageVisible: true,
+ autoResize: true,
pageBreak: true,
pannable: true,
- minVisibleWidth:200,
- minVisibleHeight:200,
+ minVisibleWidth: 200,
+ minVisibleHeight: 200,
modifiers: 'shift',
},
- // panning: {
- // enabled: true,
- // modifiers: 'shift',
- // },
mousewheel: {
enabled: true,
zoomAtMousePosition: true,
modifiers: 'ctrl',
- minScale: 0.1,
- maxScale: 10,
+ minScale: 0.5,
+ maxScale: 3,
},
connecting: {
router: {
- name: 'normal',
+ name: 'manhattan',
// args: {
// padding: 1,
// },
@@ -397,10 +442,10 @@
connector: {
name: 'rounded',
args: {
- radius: 8,
+ radius: 5,
},
},
- // anchor: 'center',
+ anchor: 'center',
connectionPoint: 'anchor',
allowBlank: false,
snap: {
@@ -412,7 +457,7 @@
line: {
stroke: '#A2B1C3',
strokeWidth: 2,
- targetMarker: 'classic'
+ targetMarker: {fill: 'none'}
}
},
labels: [{
@@ -433,7 +478,13 @@
}
}
}],
- zIndex: 0,
+ tools: {
+ name: 'segments',
+ args: {
+ attrs: {fill: '#666'},
+ },
+ },
+ zIndex: -100,
})
},
validateConnection({targetMagnet}) {
@@ -451,16 +502,13 @@
},
},
},
- resizing: {
- enabled: true,
- restricted: true
- },
+ resizing: true,
rotating: true,
selecting: {
enabled: true,
rubberband: true,
rubberEdge: true,
- // showNodeSelectionBox: true,
+ showNodeSelectionBox: true,
},
snapline: true,
keyboard: true,
@@ -468,130 +516,160 @@
})
this.graph.centerContent()
const stencil = new Addon.Stencil({
+ getDragNode: (node) => node.clone({keepId: true}),
+ getDropNode: (node) => {
+ const {width, height} = node.size()
+ if (node.getData().type && node.getData().nodeType === 'dashedBox') {
+ return node.clone().size(100, 80)
+ }
+ if (node.getData().type && node.getData().type === 'imageNodes2') {
+ return node.clone({keepId: true})
+ } else {
+ return node.clone()
+ }
+ },
+ validateNode: (node) => {
+ const existingNodes = this.graph.getNodes(); // 鑾峰彇鐢诲竷涓婃墍鏈夎妭鐐�
+ for (const existingNode of existingNodes) {
+ if (existingNode.id === node.id) {
+ this.$message({message: '璇ヨ澶囪妭鐐瑰凡鍦ㄧ敾甯冧笂锛屾棤娉曞啀娆＄粯鍒�', type: 'warning'})
+ return false; // 鍙栨秷娣诲姞鑺傜偣鎿嶄綔
+ }
+ }
+ },
title: '',
target: this.graph,
- stencilGraphWidth: 230,
- stencilGraphHeight: 300,
- collapsable: false,
+ stencilGraphWidth: 200,
+ stencilGraphHeight: 280,
+ collapsable: true,
groups: [
{
title: '杩愮畻绗﹀彿',
name: 'group1',
- collapsable: false
+ graphHeight: 260,
},
{
title: '璁惧鑺傜偣',
name: 'group2',
- collapsable: false
+ graphHeight: '',
+ layoutOptions: {
+ rowHeight: 90,
+ },
}
],
layoutOptions: {
columns: 2,
- columnWidth: 110,
- // rowHeight: 75,
+ columnWidth: 105,
},
})
document.getElementById('stencilImg').appendChild(stencil.container)
- const imageNodes = this.imgsList.map((item) =>
- this.graph.createNode({
- shape: 'image',
- imageUrl: require('/public/modelImg/'+item.imgPath+'.png'),
- width: item.imgWidth,
- height: item.imgHeight,
- x: item.imgWidth,
- y: item.imgHeight,
- data: {
- dataId: '',
- nodeType: item.nodeType,
- nodeTypeExt: ''
+ 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',
},
- attrs: {
- text:{
- text: item.imgName,
- fontSize: 14,
- style: {
- color: this.globalGridAttr.nodeColor
- },
- refX: 0.5,
- refY: '100%',
- refY2: 4,
- textAnchor: 'middle',
- textVerticalAnchor: 'top',
+ 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},
- }),
+ },
+ ports: {...this.ports},
+ }),
)
let params = {
- productId : productId
+ productId: productId
}
let res = await this.$http.get(`/basicInfo/XhProductModel/getProduct`, {params: params})
- this.imgsList2 = res.data
- console.log(this.imgsList2 ,'getProduct(productId)234567890')
- const imageNodes2 = this.imgsList2.map((item) =>
- this.graph.createNode({
- shape: 'image',
- imageUrl: `${window.SITE_CONFIG['apiURL']}/sys/oss/content2?fileId=${item.imgPath}`,
- width:item.imgWidth,
- height:item.imgHeight,
- x:item.imgWidth,
- y:item.imgHeight,
- data: {
- isRepair:false,
- 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,
- taskMtbcf:item.taskMtbcf,
- taskMtbcfOther:item.taskMtbcfOther,
- voteSum:'',
- },
- attrs: {
- text:{
- text: item.imgName,
- fontSize: 14,
- style: {
- color: this.globalGridAttr.nodeColor
- },
- refX: 0.5,
- refY: '100%',
- refY2: 4,
- textAnchor: 'middle',
- textVerticalAnchor: 'top',
+ this.imagesList2 = res.data
+ 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: 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,
+ taskMtbcf: item.taskMtbcf,
+ taskMtbcfOther: item.taskMtbcfOther,
+ imgHeight: item.imgHeight,
+ imgWidth: item.imgWidth,
+ voteNum: '',
+ },
+ attrs: {
+ text: {
+ text: item.imgName,
+ fontSize: 14,
+ style: {
+ color: this.globalGridAttr.nodeColor
},
+ refX: 0.5,
+ refY: '100%',
+ refY2: 4,
+ textAnchor: 'middle',
+ textVerticalAnchor: 'top',
},
- 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
- }
+ },
+ 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},
- }),
+ }
+ ],
+ ports: {...this.ports},
+ }),
)
stencil.load(imageNodes, 'group1')
stencil.load(imageNodes2, 'group2')
-
this.graph.bindKey(['meta+c', 'ctrl+c'], () => {
const cells = this.graph.getSelectedCells()
@@ -641,23 +719,83 @@
//delete
this.graph.bindKey('delete', () => {
const cells = this.graph.getSelectedCells()
- if (cells.length) {
- this.$confirm('鏄惁鍒犻櫎璇ヨ妭鐐�?', '鎻愮ず', {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- type: 'warning'
- }).then(() => {
- this.$message({
- type: 'success',
- message: '鍒犻櫎鎴愬姛!'
- })
- this.graph.removeCells(cells)
- }).catch(() => {
- this.$message({
- type: 'info',
- message: '宸插彇娑堝垹闄�'
- })
- })
+ console.log(cells, 'cells')
+ if (cells.length === 1) {
+ let node = cells[0]
+ if (!node.isNode()) {
+ 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)
+ 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')
+ if (inLineIsToLine) {
+ inLine[0].target = {cell: outNode.id, port: 'left1'}
+ } else {
+ outLine[0].source = {cell: inNode.id, port: 'right1'}
+ }
+ //鎻愮ず鏄惁瑕佸垹闄�
+ this.$confirm('鏄惁鍒犻櫎璇ヨ妭鐐�?', '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
+ }).then(() => {
+ if (deleteType === 1){
+ node.remove()
+ }
+ else{
+ this.deleteCombination(node)
+ }
+ this.$message({
+ type: 'success',
+ message: '鍒犻櫎鎴愬姛!'
+ })
+ }).catch(() => {
+ this.$message({
+ type: 'info',
+ message: '宸插彇娑堝垹闄�'
+ })
+ })
+ }
+ if (this.isMultipleBrach(node)) {
+ //鎻愮ず鏄惁瑕佸垹闄�
+ if (deleteType === 1)
+ node.remove()
+ else
+ this.deleteCombination(node)
+ return
+ }
+ }
+ //鎻愮ず涓嶈兘鍒犻櫎
+ } else {
+ //鎻愮ず涓嶈兘鍒犻櫎
+ this.$message({message: '鍙兘閫変腑涓�涓妭鐐�', type: 'warning'})
+ return false; // 鍙栨秷鎿嶄綔
}
})
// zoom
@@ -681,17 +819,60 @@
this.type = 'grid'
// this.id = cell.id
})
+ // 鐩戝惉鑺傜偣娣诲姞浜嬩欢
+ this.graph.on('node:added', ({node}) => {
+ if (this.isFirstLoad) {
+ return
+ }
+ if (node.getData().isSelfCreated) {
+ return
+ }
+ const nodeType = node.getData().nodeType; // 鑾峰彇鑺傜偣鐨勭被鍨�
+ const nodeObj = node
+ console.log(123)
+ 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()
+ /*//濡傛灉鑺傜偣涓庤妭鐐圭浉浜�
+ console.log(node.position().x, node.position().x, 'node.position().x')
+ if (nodeType === 'bridgeConnection') {
+ this.getBridgeConnection()
+ }*/
+ });
+ // 鐩戝惉鑺傜偣浣嶇疆鏀瑰彉浜嬩欢
+ // this.graph.on('node:change:position', ({node}) => {
+ // this.hasMoveNode = true
+ // this.hasMoveSingleNode = node
+ // });
this.graph.on('cell:click', ({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'){
+ if (this.type === 'node') {
this.nodeType = cell.getData().nodeType
- console.log(this.nodeType, 'this.nodeType')
+ // console.log(this.nodeType, cell.id, 'this.nodeType')
}
- console.log(this.shape, 'this.shape')
+ // console.log(this.shape, 'this.shape')
// this.nodeOpt(this.id, this.globalGridAttr)
})
//鍗曞嚮杈硅妭鐐�
@@ -709,15 +890,6 @@
})
// 鍗曞嚮node鑺傜偣
this.graph.on('node:click', ({node}) => {
- this.reset()
- node.attr('line/stroke', 'orange')
- node.prop('labels/0', {
- attrs: {
- body: {
- stroke: 'orange',
- },
- },
- })
})
// 鎺у埗杩炴帴妗╂樉绀�/闅愯棌
this.graph.on('node:delete', ({view, e}) => {
@@ -770,7 +942,7 @@
this.showPorts(ports, false)
})
- this.graph.on('edge:mouseenter', ({cell, view}) => {
+ this.graph.on('edge:mouseenter', ({cell}) => {
// alert(123)
cell.addTools([
{
@@ -784,15 +956,11 @@
},
},
},
+ {
+ name: 'segments',
+ args: {snapRadius: 20, attrs: {fill: '#444'}}
+ },
])
- cell.addTools(
- [
- {
- name: 'segments',
- args: {snapRadius: 20, attrs: {fill: '#444'}}
- }
- ]
- )
})
this.graph.on('edge:mouseleave', ({cell}) => {
@@ -824,42 +992,13 @@
})
})
},
- // nodeOpt(id, globalGridAttr) {
- // this.curCel = null
- // if (id) {
- // let cell = this.graph.getCellById(id)
- // console.log(cell, 'let cell 123456')
- // if (!cell || !cell.isNode()) {
- // return
- // }
- // this.curCel = cell
- // globalGridAttr.nodeStroke = cell.attr('body/stroke')
- // globalGridAttr.nodeStrokeWidth = cell.attr('body/strokeWidth')
- // globalGridAttr.nodeFill = cell.attr('body/fill')
- // globalGridAttr.nodeFontSize = cell.attr('text/fontSize')
- // globalGridAttr.nodeFontSize = cell.attr('title/fontSize')
- // globalGridAttr.nodeColor = cell.attr('text/fill')
- // globalGridAttr.nodeColor = cell.attr('title/fill')
- // globalGridAttr.nodeColor = cell.attr('text/style/color')
- // globalGridAttr.nodeColor = cell.attr('title/style/color')
- // globalGridAttr.nodeUsers = cell.attr('approve/users')
- // globalGridAttr.nodeText = cell.attr('text/text')
- // globalGridAttr.nodeDate = cell.attr('title/text')
- // // let data={
- // // dataId:this.projectId,
- // // finishDate: globalGridAttr.nodeDate,
- // // }
- // cell.getData()
- // console.log( cell.getData(),' cell.getData() 909')
- // }
- // return this.curCel;
- // },
async search() {
await this.getDiagram();
},
async saveDiagram() {
console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
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') {
@@ -872,7 +1011,7 @@
async analyzeDiagram() {
console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
this.dataForm.content = JSON.stringify(this.graph.toJSON())
- console.log(this.dataForm, 'dataFrom')
+ this.dataForm.urlPref = window.SITE_CONFIG['apiURL']
await this.$http['post'](`/taskReliability/ModelLine/analyze`, this.dataForm).then(async res => {
if (res.msg === 'success') {
this.$alert('瑙ｆ瀽鎴愬姛', '鎻愮ず', {
@@ -881,17 +1020,6 @@
}
})
},
- // AlignmentsChanges(val){
- // console.log(val,'align.value')
- // if(val ==='閫夐」1'){
- // console.log(val,'align.value')
- // this.leftAlign()
- // }
- // if(val ==='閫夐」2') {
- // console.log('鍙冲榻�','align.value')
- // this.rightAlign()
- // }
- // },
leftAlign() {
const NODE = this.graph.getSelectedCells()
let leftX = null
@@ -918,7 +1046,6 @@
for (let a of NODE) {
let x = a.getBBox().x
a.position(x, topY)
- // console.log(leftX, ':', y, ' x:y')
}
},
centerAlign() {
@@ -941,7 +1068,6 @@
for (let a of NODE) {
let y = a.getBBox().y
a.position(centerX - a.getBBox().width / 2, y)
- // console.log(leftX, ':', y, ' x:y')
}
},
shuipingAlign() {
@@ -994,42 +1120,694 @@
}
},
close() {
- if (this.timer){
+ 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鏄敾甯冧笂鍘熸湁鐨勮妭鐐广�俤ragNode鏄綋鍓嶆嫋鎷界殑鑺傜偣
+ let graphNodeType = graphNode.getData().nodeType
+ let dragNodeType = dragNode.getData().nodeType
+ let offHeight = 60
+ if (dragNodeType === 'node') {
+ offHeight = 60
+ } else if (dragNodeType === 'bridgeConnection') {
+ offHeight = 230
+ } else {
+ offHeight = 70
+ }
+ 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) {
+ let centerY = graphNode.position().y
+ let result = this.addNodeAndConnect(startNode, endNode, dragNode, dragNode.position().x, centerY)
+ inEdges[0].target = {cell: result.newStartNode.id, port: 'left1'}
+ outEdges[0].source = {cell: result.newEndNode.id, port: 'right1'}
+ graphNode.remove()
+ }
+ } else { //骞惰缁撴瀯
+ const graphNodeStartNodeId = graphNode.getData().startNodeId // 鑾峰彇鐢诲竷涓婂師鏈夎妭鐐圭殑寮�濮婭D
+ const graphNodeStartNode = this.graph.getCellById(graphNodeStartNodeId) // 閫氳繃寮�濮婭D寰楀埌鍒濆鑺傜偣瀵硅薄
+ let graphNodeY = graphNode.position().y - graphNode.getBBox().height / 2 // 鑾峰彇鐢诲竷鍘熸湁鑺傜偣鐨剏鍧愭爣
+ 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锛宮axY
+
+ let pointXY = {minY: minY, maxY: maxY}
+ console.log(pointXY, 'old')
+ this.getYRange(inEdges, graphNodeStartNode, pointXY)
+ console.log(pointXY, 'new')
+
+ let minX = graphNodeStartNode.position().x + graphNodeStartNode.getBBox().width
+ let maxX = graphNode.position().x
+ let centerX = minX + (maxX - minX) / 2
+ let centerY = graphNodeY - pointXY.minY > pointXY.maxY - graphNodeY ? pointXY.maxY + 30 : pointXY.minY - offHeight - 30
+
+ let result = this.addNodeAndConnect(graphNodeStartNode, graphNode, dragNode, minX, centerY)
+ 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, leftX, centerY) { // graphCell鏄敾甯冧笂鍘熸湁鐨勮妭鐐广�俤ragNode鏄綋鍓嶆嫋鎷界殑鑺傜偣
+ let dragNodeType = dragNode.getData().nodeType
+ if (dragNodeType === 'node' || dragNodeType === 'dashedBox') {
+ dragNode.position(leftX + 50, centerY);
+ return {newStartNode: dragNode, newEndNode: dragNode}
+ } else if (dragNodeType === 'bridgeConnection') {
+ return this.createBridgeConnection(leftX, centerY, startNode, endNode, dragNode)
+ } else {
+ return this.createParallelBrach(leftX, centerY, startNode, endNode, dragNode)
+ }
+ },
+ // 鐩镐氦鐨勮竟
+ addNodeAndInsertEdge(graphEdge, dragNode) {
+ 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 centerY = dragNode.position().y
+ 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(startNode, endNode, dragNode, dragNode.position().x, centerY)
+ 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()
+ 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, startNode, endNode, dragNode) {
+ dragNode.position(x + 320, y - dragNode.size().height / 2)
+ const connectNode = this.createConnectNode(x + 50, y)
+ const dashedBox = this.createDashedBox(x + 150, y)
+ dragNode.setData({startNodeId: connectNode.id})
+
+ this.graph.addEdge({
+ source: {cell: connectNode, port: 'right1'},
+ target: {cell: dashedBox, port: 'left1'},
+ router: {name: 'manhattan'},
+ connector: {name: 'rounded'}
+ })
+ this.graph.addEdge({
+ source: {cell: dashedBox, port: 'right1'},
+ target: {cell: dragNode, port: 'left1'},
+ router: {name: 'manhattan'},
+ connector: {name: 'rounded'}
+ })
+ return {newStartNode: connectNode, newEndNode: dragNode}
+ /* this.graph.addEdge({
+ source: {cell: startNode, port: 'right1'},
+ target: {cell: connectNode, port: 'left1'},
+ router: {name: 'manhattan'},
+ connector: {name: 'rounded'}
+ })
+ this.graph.addEdge({
+ source: {cell: dragNode, port: 'right1'},
+ target: {cell: endNode, port: 'left1'},
+ router: {name: 'manhattan'},
+ connector: {name: 'rounded'}
+ })*/
+ },
+ createBridgeConnection(x, y, startNode, endNode, dragNode) {
+ const leftTopDashedBox = this.createDashedBox(x + 120, y)
+ const rightTopDashedBox = this.createDashedBox(x + 400, 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 leftBottomDashedBox = this.createDashedBox(x + 120, y + 160)
+ const rightBottomDashedBox = this.createDashedBox(x + 400, y + 160)
+
+ rightConnectNode.setData({startNodeId: leftConnectNode.id})
+ leftConnectNode.setData({endNodeId: rightConnectNode.id})
+ /* this.graph.addEdge({
+ source: {cell: startNode, port: 'right1'},
+ target: {cell: leftConnectNode, port: 'left1'},
+ router: {name: 'manhattan'},
+ connector: {name: 'rounded'},
+ })
+ this.graph.addEdge({
+ source: {cell: rightConnectNode, port: 'right1'},
+ target: {cell: endNode, port: 'left1'},
+ router: {name: 'manhattan'},
+ connector: {name: 'rounded'}
+ })*/
+ this.graph.addEdge({
+ source: {cell: leftConnectNode, port: 'right1'},
+ target: {cell: leftTopDashedBox, port: 'left1'},
+ router: {name: 'manhattan'},
+ connector: {name: 'rounded'}
+ })
+ this.graph.addEdge({
+ source: {cell: leftConnectNode, port: 'right1'},
+ target: {cell: leftBottomDashedBox, port: 'left1'},
+ router: {name: 'manhattan'},
+ connector: {name: 'rounded'}
+ })
+
+ let edgeTop = this.graph.addEdge({
+ source: {cell: leftTopDashedBox, port: 'right1'},
+ target: {cell: rightTopDashedBox, port: 'left1'},
+ router: {name: 'manhattan'},
+ connector: {name: 'rounded'}
+ })
+ let edgeBottom = this.graph.addEdge({
+ source: {cell: leftBottomDashedBox, port: 'right1'},
+ target: {cell: rightBottomDashedBox, port: 'left1'},
+ router: {name: 'manhattan'},
+ connector: {name: 'rounded'}
+ })
+
+ this.graph.addEdge({
+ source: {cell: rightTopDashedBox, port: 'right1'},
+ target: {cell: rightConnectNode, port: 'left1'},
+ router: {name: 'manhattan'},
+ connector: {name: 'rounded'}
+ })
+ this.graph.addEdge({
+ source: {cell: rightBottomDashedBox, port: 'right1'},
+ target: {cell: rightConnectNode, port: 'left1'},
+ router: {name: 'manhattan'},
+ connector: {name: 'rounded'}
+ })
+
+ this.graph.addEdge({
+ source: {cell: edgeTop},
+ target: {cell: alignCenterDashedBox, port: 'top1'},
+ router: {name: 'manhattan'},
+ connector: {name: 'rounded'},
+ })
+ this.graph.addEdge({
+ source: {cell: alignCenterDashedBox, port: 'bottom1'},
+ target: {cell: edgeBottom},
+ router: {name: 'manhattan'},
+ connector: {name: 'rounded'},
+ })
+ dragNode.remove()
+ return {newStartNode: leftConnectNode, newEndNode: rightConnectNode}
+ },
+ createDashedBox(x, y) {
+ const dashId = getUUID().toString()
+ let dashedBox = this.graph.addNode({
+ shape: 'image',
+ // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
+ width: 100,
+ height: 60,
+ id: dashId,
+ data: {
+ isSelfCreated: true,
+ type: 'imageNodes',
+ dataId: '',
+ nodeType: 'dashedBox',
+ nodeTypeExt: '',
+ voteNum: ''
+ },
+ attrs: {
+ image: {
+ 'xlink:href': '/modelImg/dashedBox.svg',
+ },
+ text: {
+ text: 'dashedBox',
+ fontSize: 14,
+ refX: 0.5,
+ refY: '100%',
+ refY2: 4,
+ textAnchor: 'middle',
+ textVerticalAnchor: 'top',
+ },
+ },
+ ports: {...this.ports},
+ })
+ dashedBox.position(x, y - dashedBox.size().height / 2)
+ return dashedBox
+ },
+ createConnectNode(x, y) {
+ const connectId = getUUID().toString()
+ const dragNodeId = getUUID().toString()
+ let connectNode = this.graph.addNode({
+ shape: 'image',
+ // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
+ width: 30,
+ height: 30,
+ id: connectId,
+ data: {
+ isSelfCreated: true,
+ type: 'imageNodes',
+ endNodeId: dragNodeId,
+ dataId: '',
+ nodeType: 'connect',
+ nodeTypeExt: '',
+ voteNum: ''
+ },
+ attrs: {
+ image: {
+ 'xlink:href': '/modelImg/connect.svg',
+ },
+ text: {
+ text: 'connect',
+ fontSize: 14,
+ refX: 0.5,
+ refY: '100%',
+ refY2: 4,
+ textAnchor: 'middle',
+ textVerticalAnchor: 'top',
+ },
+ },
+ ports: {...this.ports},
+ })
+ connectNode.position(x, y - connectNode.size().height / 2)
+ return connectNode
+ },
+ createBridgeNode(x, y) {
+ const connectId = getUUID().toString()
+ const dragNodeId = getUUID().toString()
+ let connectNode = this.graph.addNode({
+ shape: 'image',
+ width: 50,
+ height: 50,
+ id: connectId,
+ data: {
+ isSelfCreated: true,
+ type: 'imageNodes',
+ endNodeId: dragNodeId,
+ dataId: '',
+ nodeType: 'bridge',
+ nodeTypeExt: '',
+ voteNum: ''
+ },
+ attrs: {
+ image: {
+ 'xlink:href': '/modelImg/connect.svg',
+ },
+ text: {
+ text: 'bridge',
+ fontSize: 14,
+ refX: 0.5,
+ refY: '100%',
+ refY2: 4,
+ textAnchor: 'middle',
+ textVerticalAnchor: 'top',
+ },
+ },
+ ports: {...this.ports},
+ })
+ connectNode.position(x, y - connectNode.size().height / 2)
+ return connectNode
+ },
+ getYRange(inEdges, startNode, pointXY) {
+ for (let inEdge of inEdges) {
+ let nodeId = inEdge.source.cell
+ let node = this.graph.getCellById(nodeId)
+ if (node.position().y < pointXY.minY) {
+ pointXY.minY = node.position().y
+ }
+ if (node.position().y + node.getBBox().height > pointXY.maxY) {
+ pointXY.maxY = node.position().y + node.getBBox().height
+ }
+ if (node.id === startNode.id) {
+ continue
+ }
+ const edges = this.graph.getConnectedEdges(node); // 鑾峰彇鐢诲竷涓婂師鏈夌殑鑺傜偣鎵�鏈夎繘鏉ョ殑绾�
+ let inEdgesPrev = edges.filter(edge => edge.target.cell === node.id)
+ this.getYRange(inEdgesPrev, startNode, pointXY)
+ }
+ },
+ isSeriesNode(startNode, endNode) {
+ let result = false
+ let inNode = null
+ let outNode = null
+ let inEdges = this.getInLinesOfNode(startNode)
+ console.log(inEdges, 'inEdges')
+ if (inEdges.length === 1) {
+ let isMyLineToOtherLine = this.isMyLineToOtherLine(inEdges[0])
+ let hasOtherLineToMyLine = this.hasOtherLineToMyLine(inEdges[0].id)
+ let inNodeId = inEdges[0].source.cell
+ inNode = this.graph.getCellById(inNodeId)
+ if (!isMyLineToOtherLine && !hasOtherLineToMyLine) {
+ let inNodeType = inNode.getData().nodeType
+ console.log(inNodeType, 'inNodeType')
+ if ('node,dashedBox,parallel,switch,vote,bridge'.indexOf(inNodeType) > -1) {
+ result = true
+ }
+ }
+ }
+ let outEdges = this.getOutLinesOfNode(endNode)
+ console.log(outEdges, 'outEdges')
+ if (outEdges.length === 1) {
+ let isMyLineToOtherLine = this.isMyLineToOtherLine(outEdges[0])
+ let hasOtherLineToMyLine = this.hasOtherLineToMyLine(outEdges[0].id)
+ let outNodeId = outEdges[0].target.cell
+ outNode = this.graph.getCellById(outNodeId)
+ if (!isMyLineToOtherLine && !hasOtherLineToMyLine) {
+ let outNodeType = outNode.getData().nodeType
+ if ('node,connect,dashedBox'.indexOf(outNodeType) > -1) {
+ result = true
+ }
+ }
+ }
+ console.log(result, 'result')
+ if (result && inNode && outNode) {
+ console.log(inNode, outNode, 'inNode, outNode')
+ return {inNode, outNode}
+ } else {
+ return false
+ }
+ },
+ hasOtherLineToMyLine(edgeId) {
+ for (let edge of this.graph.getEdges()) {
+ if (edge.source.cell === edgeId || edge.target.cell === edgeId)
+ return true
+ }
+ return false
+ },
+ isMyLineToOtherLine(myEdge) {
+ for (let edge of this.graph.getEdges()) {
+ if (myEdge.source.cell === edge.id || myEdge.target.cell === edge.id)
+ return true
+ }
+ return false
+ },
+ isTopBottom(edge) {
+ if (edge.source.port === 'top1' || edge.source.port === 'bottom1' || edge.target.port === 'top1' || edge.target.port === 'bottom1') {
+ return true
+ }
+ },
+ isMultipleBrach(node) {
+ let outEdges = this.getOutLinesOfNode(node)
+ let outNodeId = outEdges[0].target.cell
+ if (this.isTopBottom(outEdges[0]))
+ return false
+ let outNode = this.graph.getCellById(outNodeId)
+ if ('bridge,end'.indexOf(outNode.getData().nodeType) > -1) {
+ return false
+ }
+ let inEdges = this.getInLinesOfNode(outNode)
+ return inEdges.length > 1;
+ },
+ deleteCombination(node) {
+ let startNode = this.graph.getCellById(node.getData().startNodeId)
+ let allCombinationNodes = []
+ console.log(startNode, 'startNode')
+ this.getAllCombinationNodes(startNode.id, node, allCombinationNodes)
+ console.log(allCombinationNodes, 'allCombinationNodes')
+ this.graph.removeCells(allCombinationNodes)
+ },
+ getAllCombinationNodes(startNodeId, node, allCombinationNodes) {
+ allCombinationNodes.push(node)
+ if (node.id == startNodeId || node.isEdge()) {
+ return
+ }
+ let inEdges = this.getInLinesOfNode(node) // 濡傛灉锛燂紵锛�
+ for (let inEdge of inEdges) {
+ let lineNode = this.getNodeOfConectLine(inEdge)
+ if (lineNode) {
+ this.getAllCombinationNodes(startNodeId, lineNode, allCombinationNodes)
+ }
+ let inNodeId = inEdge.source.cell
+ let inNode = this.graph.getCellById(inNodeId)
+ if (inNode.isEdge())
+ continue
+ this.getAllCombinationNodes(startNodeId, inNode, allCombinationNodes)
+ }
+ },
+ getNodeOfConectLine(paramEdge) {
+ for (let edge of this.graph.getEdges()) {
+ let nodeId = null
+ /* if (edge.source.cell === paramEdge.id){
+ nodeId = edge.target.cell
+ }*/
+ if (edge.target.cell === paramEdge.id) {
+ nodeId = edge.source.cell
+ }
+ if (nodeId) {
+ let node = this.graph.getCellById(nodeId)
+ if (node.isNode())
+ return node
+ }
+ }
+ return null
+ },
+ getInLinesOfNode(node) {
+ const edges = this.graph.getConnectedEdges(node); // 鑾峰彇鐢诲竷涓婂師鏈夌殑鑺傜偣鎵�鏈夎繘鏉ョ殑绾�
+ console.log(edges, '鑾峰彇鐢诲竷涓婂紑濮嬭妭鐐规墍鏈夌殑绾� edges')
+ return edges.filter(edge => edge.target.cell === node.id)
+ },
+ getOutLinesOfNode(node) {
+ console.log(node, '鑾峰彇鐢诲竷涓婄殑缁撴潫鑺傜偣 node')
+ const edges = this.graph.getConnectedEdges(node); // 鑾峰彇鐢诲竷涓婂師鏈夌殑鑺傜偣鎵�鏈夎繘鏉ョ殑绾�
+ console.log(edges, '鑾峰彇鐢诲竷涓婄殑缁撴潫鑺傜偣鎵�鏈夌殑绾� edges')
+ return edges.filter(edge => edge.source.cell === node.id)
+ },
+ },
}
</script>
<style>
-#containerImg {
- display: flex;
- border: 1px solid #dfe3e8;
- height:400px ;
- width: 100% !important;
-}
+ #containerImg {
+ display: flex;
+ border: 1px solid #dfe3e8;
+ height: 400px;
+ width: 100% !important;
+ }
-.x6-graph-scroller.x6-graph-scroller-pannable {
- 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;
-}
+ #stencilImg {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ border-right: 1px solid #dfe3e8;
+ }
-.x6-widget-stencil {
- position: relative;
- height: 100%;
-}
+ .x6-widget-stencil {
+ position: relative;
+ height: 100%;
+ }
-.x6-widget-stencil-content {
- position: relative;
- height: 100%;
-}
+ #stencilImg .x6-graph-svg-viewport {
+ height: 100%;
+ }
+
+ .x6-widget-stencil-content {
+ position: relative;
+ height: calc(100% - 32px);
+ }
+
+ #stencilImg .x6-widget-stencil.collapsable > .x6-widget-stencil-content {
+ top: 0
+ }
</style>
--
Gitblit v1.9.1