From 563640b16778af6a281ed9417e2dcbed0ba5aa54 Mon Sep 17 00:00:00 2001
From: xyc <jc_xiong@hotmail.com>
Date: 星期三, 08 五月 2024 10:51:59 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
web/src/views/modules/taskReliability/RBD-edit-img.vue | 670 ++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 488 insertions(+), 182 deletions(-)
diff --git a/web/src/views/modules/taskReliability/RBD-edit-img.vue b/web/src/views/modules/taskReliability/RBD-edit-img.vue
index 5b240b8..0878f72 100644
--- a/web/src/views/modules/taskReliability/RBD-edit-img.vue
+++ b/web/src/views/modules/taskReliability/RBD-edit-img.vue
@@ -3,7 +3,7 @@
<el-row :gutter="[8,8]">
<el-col :span="4">
<div :style="'height:' +left_p+'px'">
- <div class="fa-card-a" style="height: 100%">
+ <div style="height: 100%">
<div id="stencilImg"></div>
</div>
</div>
@@ -12,58 +12,34 @@
<div class="fa-card-a">
<el-form :inline="true">
<el-form-item>
- 妯″瀷鍚嶇О锛歿{modelName}}
+ 妯″瀷鍚嶇О锛歿{ 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>
- </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 @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"
@@ -111,26 +87,28 @@
},
data() {
return {
+ hasMoveNode: false,
+ hasMoveSingleNode: null,
+ nodeAdded: false,
+ connectNode: {},
modelId: '',
modelName: '',
modelType: '',
timer: null,
- imgsList: [
+ 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: 20,
- imgHeight: 20,
+ imgWidth: 30,
+ imgHeight: 30,
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',
+ imgPath: 'switch',
imgName: 'switch',
nodeType: 'switch',
imgWidth: 60,
@@ -138,9 +116,36 @@
imgId: '5',
data: {}
},
- {imgPath: 'voteRight', imgName: 'vote', nodeType: 'vote', imgWidth: 60, imgHeight: 60, imgId: '6', 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: 'dashedBox',
+ imgName: 'dashedBox',
+ nodeType: 'dashedBox',
+ imgWidth: 60,
+ imgHeight: 60,
+ imgId: '9',
+ data: {}
+ },
+ {
+ imgPath: 'bridgeConnection',
+ imgName: 'bridgeConnection',
+ nodeType: 'bridgeConnection',
+ imgWidth: 60,
+ imgHeight: 60,
+ imgId: '9',
+ data: {}
+ },
],
- imgsList2: [
+ imagesList2: [
// {imgPath:'logo',imgName:'logo',nodeType:'node',,nodeTypeExt:'',productType:'',statusImg:'',imgWidth:60,imgHeight:60,imgId:'100',dataId:'123456'},
],
nodeType: '',
@@ -157,6 +162,7 @@
content: null,
publishContent: null,
hasPublish: 0,
+ urlPref: '',
},
// emptyJson: {
// // 鑺傜偣
@@ -184,6 +190,7 @@
id: '',
graph: null,
globalGridAttr: {
+ productType: '',
voteNum: '',
repairMttcr: '',
repairMttcrOther: '',
@@ -211,7 +218,8 @@
stroke: '#5F95FF',
strokeWidth: 1,
- connector: 'normal',
+ connector: 'rounded',
+ router: 'manhattan',
label: '',
nodeStroke: '#5F95FF',
nodeStrokeWidth: 1,
@@ -234,7 +242,7 @@
ports: {
groups: {
top: {
- position: 'top',
+ position: {name: 'top'},
attrs: {
circle: {
r: 4,
@@ -249,7 +257,7 @@
},
},
right: {
- position: 'right',
+ position: {name: 'right'},
attrs: {
circle: {
r: 4,
@@ -264,7 +272,7 @@
},
},
bottom: {
- position: 'bottom',
+ position: {name: 'bottom'},
attrs: {
circle: {
r: 4,
@@ -279,7 +287,7 @@
},
},
left: {
- position: 'left',
+ position: {name: 'left'},
attrs: {
circle: {
r: 4,
@@ -296,15 +304,19 @@
},
items: [
{
+ id: 'top1',
group: 'top',
},
{
+ id: 'right1',
group: 'right',
},
{
+ id: 'bottom1',
group: 'bottom',
},
{
+ id: 'left1',
group: 'left',
},
],
@@ -335,19 +347,24 @@
},
async getDiagram(modelId) {
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) {
+ 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')
- this.graph.fromJSON(this.diagramJson)
- this.graph.centerContent()
- this.graph.zoomToFit()
+ if(this.diagramJson.cells.length!==0){
+ this.graph.fromJSON(this.diagramJson)
+ }else {
+ this.initCells()
+ }
+ console.log(this.diagramJson.cells.length, 'this.diagramJson.cells.length')
+
+ this.graph.positionContent('left')
+ // this.graph.centerContent()
+ // this.graph.zoomToFit()
} else {
await this.clearDiagram()
}
@@ -356,8 +373,8 @@
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) {
@@ -373,41 +390,38 @@
visible: true,
},
autoResize: true,
- history: {
- enabled: true,
- beforeAddCommand(event, args) {
- if (args.key==='tools') {
- console.log(args.key,'event, args')
- return false
- }
- },
+ 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,
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,
// },
@@ -415,10 +429,10 @@
connector: {
name: 'rounded',
args: {
- radius: 8,
+ radius: 5,
},
},
- // anchor: 'center',
+ anchor: 'center',
connectionPoint: 'anchor',
allowBlank: false,
snap: {
@@ -452,9 +466,9 @@
}
}],
tools: {
- name: 'vertices',
+ name: 'segments',
args: {
- attrs: { fill: '#666' },
+ attrs: {fill: '#666'},
},
},
zIndex: 0,
@@ -475,16 +489,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,
@@ -492,34 +503,45 @@
})
this.graph.centerContent()
const stencil = new Addon.Stencil({
- getDropNode(node) {
- let {width, height} = node.size()
- if (node.getData().imgWidth) {
- width = node.getData().imgWidth
+ 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(170, 90)
}
- if (node.getData().imgHeight) {
- height = node.getData().imgHeight
+ if (node.getData().type && node.getData().type === 'imageNodes2') {
+ return node.clone({keepId: true})
+ } else {
+ return node.clone()
}
- console.log(node.getData().imgWidth, node.getData().imgHeight, 'node.size()')
- return node.clone().size(width, height)
+ },
+ 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: 200,
- stencilGraphHeight: 280,
- collapsable: true,
+ stencilGraphWidth: 200,
+ stencilGraphHeight: 280,
+ collapsable: true,
groups: [
{
title: '杩愮畻绗﹀彿',
name: 'group1',
+ graphHeight: 360,
},
{
title: '璁惧鑺傜偣',
name: 'group2',
- graphHeight: '',
- layoutOptions: {
- rowHeight: 90,
- },
+ graphHeight: '',
+ layoutOptions: {
+ rowHeight: 90,
+ },
}
],
layoutOptions: {
@@ -528,21 +550,23 @@
},
})
document.getElementById('stencilImg').appendChild(stencil.container)
- const imageNodes = this.imgsList.map((item) =>
+ const imageNodes = this.imagesList.map((item) =>
this.graph.createNode({
shape: 'image',
- imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
+ // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
width: item.imgWidth,
height: item.imgHeight,
- x: item.imgWidth,
- y: item.imgHeight,
data: {
+ type: 'imageNodes',
dataId: '',
nodeType: item.nodeType,
nodeTypeExt: '',
- voteNum:''
+ voteNum: ''
},
attrs: {
+ image: {
+ 'xlink:href': '/modelImg/' + item.imgPath + '.svg',
+ },
text: {
text: item.imgName,
fontSize: 14,
@@ -563,15 +587,17 @@
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.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,
@@ -586,7 +612,7 @@
taskMtbcfOther: item.taskMtbcfOther,
imgHeight: item.imgHeight,
imgWidth: item.imgWidth,
- voteNum:'',
+ voteNum: '',
},
attrs: {
text: {
@@ -628,7 +654,6 @@
)
stencil.load(imageNodes, 'group1')
stencil.load(imageNodes2, 'group2')
-
this.graph.bindKey(['meta+c', 'ctrl+c'], () => {
const cells = this.graph.getSelectedCells()
@@ -718,7 +743,81 @@
this.type = 'grid'
// this.id = cell.id
})
+ // 鐩戝惉鑺傜偣娣诲姞浜嬩欢
+ this.graph.on('node:added', ({node}) => {
+ const nodeId = node.id; // 鑾峰彇鑺傜偣鐨勫敮涓� ID
+ const nodeObj = node
+ const intersectNodes = [];
+ // 妫�鏌ラ櫎褰撳墠鑺傜偣涔嬪鐨勬墍鏈夎妭鐐圭殑鍖呭洿妗嗘槸鍚︾浉浜�
+ for (const otherNode of this.graph.getNodes()) {
+ if (otherNode === node) continue;
+ const bbox1 = node.getBBox();
+ const bbox2 = otherNode.getBBox();
+ if (this.isIntersect(bbox1, bbox2)) {
+ intersectNodes.push(otherNode);
+ }
+ }
+ if (intersectNodes.length > 0) {
+ // console.log('Nodes intersect with node:', node.id);
+ console.log('Intersecting nodes:', intersectNodes.map(n => n)); // 鐩镐氦鑺傜偣鐨勫璞�
+ intersectNodes.map(node => {
+ this.addNodeAndConnect(node, nodeObj);
+ })
+ }
+ });
+ // 鐩戝惉鑺傜偣浣嶇疆鏀瑰彉浜嬩欢
+ this.graph.on('node:change:position', ({node}) => {
+ this.hasMoveNode = true
+ this.hasMoveSingleNode = node
+ });
+ // 鎶捣
+ this.graph.on('node:mouseup', ({e,x,y,node}) => {
+ if (this.hasMoveNode) {
+ const selectionNodes = this.graph.getSelectedCells().filter(node => node.isNode() )
+ if (selectionNodes.length == 0){
+ selectionNodes.push(this.hasMoveSingleNode)
+ }
+ //let selectionNodes = []
+ console.log('妯潗鏍囷細',x,'绾靛潗鏍囷細'+y)
+ // let allNodes = this.graph.getNodes()
+ //
+ // for(let node of allNodes){
+ // if (this.graph.isSelected(node)){
+ // selectionNodes.push(node)
+ // }
+ //
+ // }
+ // 鑾峰彇鍖呭惈鎸囧畾鍧愭爣鐐圭殑鑺傜偣
+ const nodes = this.graph.getNodes();
+ let hasNodes = []
+ for (let i = 0; i < nodes.length; i++) {
+ const node = nodes[i];
+ const bbox = node.getBBox();
+ if (x>=bbox.x && x <= bbox.x + bbox.width && y>=bbox.y && y <= bbox.y + bbox.height) {
+ if ( selectionNodes.indexOf(node)===-1) {
+ hasNodes.push(node);
+ }
+ }
+ }
+ if(hasNodes){}
+ console.log('鑾峰彇鍖呭惈鎸囧畾鍧愭爣鐐圭殑鑺傜偣闆嗗悎',hasNodes)
+ console.log('閫変腑鐨勮妭鐐归泦鍚堬細',selectionNodes)
+
+ // if (selectionNodes.length>2)
+ // this.graph.addEdge({
+ // source: {cell: selectionNodes[0], port: 'left1'},
+ // target: {cell: selectionNodes[selectionNodes.length-1], port: 'right1'},
+ // router: {name: 'manhattan'},
+ // connector: {name: 'rounded'}
+ // })
+ this.hasMoveNode = false
+ this.hasMoveSingleNode = null
+
+
+ // console.log('绉诲姩杩囪妭鐐癸紙澶氫釜锛夊啀鎶捣榧犳爣鍚庡緱鍒扮殑鑺傜偣',selectedNodes);
+ }
+ });
this.graph.on('cell:click', ({cell}) => {
// this.type.value = cell.isNode() ? "node" : "edge"
this.type = cell.isNode() ? 'node' : 'edge'
@@ -726,9 +825,9 @@
this.id = cell.id
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)
})
//鍗曞嚮杈硅妭鐐�
@@ -746,15 +845,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}) => {
@@ -809,9 +899,23 @@
this.graph.on('edge:mouseenter', ({cell}) => {
// alert(123)
- cell.addTools(
- ['vertices', 'segments']
- )
+ cell.addTools([
+ {
+ name: 'source-arrowhead',
+ },
+ {
+ name: 'target-arrowhead',
+ args: {
+ attrs: {
+ fill: 'red',
+ },
+ },
+ },
+ {
+ name: 'segments',
+ args: {snapRadius: 20, attrs: {fill: '#444'}}
+ },
+ ])
})
this.graph.on('edge:mouseleave', ({cell}) => {
@@ -843,42 +947,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') {
@@ -891,7 +966,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('瑙ｆ瀽鎴愬姛', '鎻愮ず', {
@@ -900,17 +975,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
@@ -937,7 +1001,6 @@
for (let a of NODE) {
let x = a.getBBox().x
a.position(x, topY)
- // console.log(leftX, ':', y, ' x:y')
}
},
centerAlign() {
@@ -960,7 +1023,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() {
@@ -1017,6 +1079,247 @@
window.clearInterval(this.timer)
}
},
+ // 瀹氫箟鍑芥暟鏉ユ鏌ヤ袱涓寘鍥存鏄惁鐩镐氦
+ isIntersect(bbox1, bbox2) {
+ return (
+ bbox1.x < bbox2.x + bbox2.width &&
+ bbox1.x + bbox1.width > bbox2.x &&
+ bbox1.y < bbox2.y + bbox2.height &&
+ bbox1.y + bbox1.height > bbox2.y
+ )
+ },
+ addNodeAndConnect(node, nodeObj) { // node鏄敾甯冨師鏈夌殑鑺傜偣銆俷odeObj鏄綋鍓嶆嫋鎷界殑鑺傜偣
+ const nodeType = node.getData().nodeType // 鑾峰彇鐢诲竷鍘熸湁鐨勮妭鐐圭被鍨�
+ const nodeObjType = nodeObj.getData().nodeType // 鑾峰彇褰撳墠鎷栨嫿鐨勮妭鐐圭被鍨�
+ const edges = this.graph.getConnectedEdges(node); // 鑾峰彇涓庡師鑺傜偣鐩稿叧鑱旂殑鎵�鏈夎繛鎺ョ嚎
+ let TopSum = 0 // 鍦ㄥ師鑺傜偣涓婃柟
+ let BottomSum = 0 // 鍦ㄥ師鑺傜偣涓嬫柟
+ const edgesSum = edges.length
+ if ((nodeType === 'end'|| nodeType === 'vote' || nodeType === 'switch' || nodeType === 'parallel') && nodeObjType === 'node') {
+ if (edges.length === 0) {
+ if (!this.nodeAdded) {
+ // 娣诲姞鑺傜偣鐨勬搷浣�
+ this.connectNode = this.graph.addNode({
+ shape: 'image',
+ // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
+ width: 30,
+ height: 30,
+ data: {
+ type: 'imageNodes',
+ dataId: '',
+ signId:node.id,
+ 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},
+ })
+ // 璁剧疆鏍囪涓� true锛岃〃绀哄凡缁忔坊鍔犺繃鑺傜偣
+ this.nodeAdded = true;
+ }
+ nodeObj.position(node.position().x - 120, node.position().y - (120 * edgesSum));
+ this.connectNode.position(node.position().x - 240, node.position().y + (node.size().height - this.connectNode.size().height) / 2);
+ } else if (edges.length === 1) {
+ // 灏嗚妭鐐圭Щ鍔ㄥ埌鎸囧畾鐨勪綅缃�
+ nodeObj.position(node.position().x - 120, node.position().y - (120 * edgesSum));
+ } else {
+ for (const edge of edges) {
+ const sourcePointY = edge.getSourcePoint().y; // 鑾峰彇杩炴帴绾跨殑璧峰鐐箉鍧愭爣
+ const targetPointY = edge.getTargetPoint().y; // 鑾峰彇杩炴帴绾跨殑缁撴潫鐐箉鍧愭爣
+ console.log('鍘熻妭鐐筜鍧愭爣' + node.position().y, '杩炴帴绾胯捣濮媃鍧愭爣' + sourcePointY)
+ if (targetPointY > sourcePointY) {
+ TopSum++
+ } else if (targetPointY < sourcePointY) {
+ BottomSum++
+ }
+ }
+ console.log('鍦ㄥ師鑺傜偣涓婃柟鐨勮繛鎺ョ嚎鏁伴噺:' + TopSum, '鍦ㄥ師鑺傜偣涓嬫柟鐨勮繛鎺ョ嚎鏁伴噺:' + BottomSum)
+ if (TopSum > BottomSum) {
+ nodeObj.position(node.position().x - 120, node.position().y + (120 + (120 * BottomSum)))
+ } else {
+ nodeObj.position(node.position().x - 120, node.position().y - (120 + (120 * TopSum)));
+ }
+ }
+ this.graph.addEdge({
+ source: {cell: nodeObj, port: 'right1'},
+ target: {cell: node, port: 'left1'},
+ router: {name: 'manhattan'},
+ connector: {name: 'rounded'}
+ })
+ if (this.nodeAdded) {
+ console.log(this.connectNode, 'connectNode')
+ this.graph.addEdge({
+ source: {cell: this.connectNode, port: 'right1'},
+ target: {cell: nodeObj, port: 'left1'},
+ router: {name: 'manhattan'},
+ connector: {name: 'rounded'}
+ })
+ }
+ }
+ if (nodeType === 'node' || (nodeType === 'dashedBox' && nodeObjType === 'dashedBox')) {
+ // 閬嶅巻鎵�鏈夎繛鎺ョ嚎骞跺垹闄や笌缁欏畾鑺傜偣瀵硅薄鐩稿叧鐨勮繛鎺ョ嚎
+ console.log(edges, '鎵�鏈夋湁鍏宠仈鐨勮繛鎺ョ嚎 edge')
+ if (edges.length === 0) {
+ this.graph.addEdge({
+ source: {cell: node, port: 'right1'},
+ target: {cell: nodeObj, port: 'left1'},
+ router: {name: 'manhattan'},
+ connector: {name: 'rounded'}
+ })
+ return nodeObj.position(node.position().x + node.getBBox().width + 50, node.position().y);
+ } else {
+ for (const edge of edges) {
+ console.log(edge, '鎵�鏈夋湁鍏宠仈鐨勮繛鎺ョ嚎 edge')
+ if (edge.source.cell === node.id) { // 濡傛灉杩炴帴绾跨殑璧峰鑺傜偣绛変簬褰撳墠鐢诲竷鐩爣鑺傜偣鐨処D
+ const sourceNode = this.graph.getCellById(edge.source.cell); // 鑾峰彇杩炴帴绾跨殑婧愯妭鐐瑰璞�
+ const targetNode = this.graph.getCellById(edge.target.cell) // 鑾峰彇杩炴帴绾跨殑鐩爣鑺傜偣瀵硅薄
+ console.log(sourceNode, targetNode, 'targetNode 鐩爣鑺傜偣瀵硅薄')
+ // edge.remove(); // 浠庡浘涓垹闄よ杩炴帴绾�
+ nodeObj.position(node.position().x + node.getBBox().width + 50, node.position().y + (node.size().height - nodeObj.size().height) / 2);
+ // edge.source = {cell: node, port: 'right1'}
+ edge.target = {cell: nodeObj, port: 'left1'}
+ // targetNode.position(nodeObj.position().x +nodeObj.getBBox().width+50, node.position().y);
+ // this.graph.addEdge({
+ // source: {cell: node, port: 'right1'},
+ // target: {cell: nodeObj, port: 'left1'},
+ // router: {name: 'manhattan'},
+ // connector: {name: 'rounded'}
+ // })
+ this.graph.addEdge({
+ source: {cell: nodeObj, port: 'right1'},
+ target: {cell: targetNode, port: 'left1'},
+ router: {name: 'manhattan'},
+ connector: {name: 'rounded'}
+ })
+ } else {
+ this.graph.addEdge({
+ source: {cell: node, port: 'right1'},
+ target: {cell: nodeObj, port: 'left1'},
+ router: {name: 'manhattan'},
+ connector: {name: 'rounded'}
+ })
+ nodeObj.position(node.position().x + node.getBBox().width + 50, node.position().y);
+ }
+ }
+ }
+
+
+ }
+ },
+ initCells(){
+ const startNode = this.graph.addNode({
+ shape: 'image',
+ // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
+ width: 60,
+ height: 60,
+ data: {
+ type: 'imageNodes',
+ 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: 170,
+ height: 90,
+ 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,
+ data: {
+ type: 'imageNodes',
+ 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'}
+ })
+ },
},
}
@@ -1045,15 +1348,18 @@
position: relative;
height: 100%;
}
-#stencilImg .x6-graph-svg-viewport{
+
+ #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
+ height: calc(100% - 32px);
+ }
+
+ #stencilImg .x6-widget-stencil.collapsable > .x6-widget-stencil-content {
+ top: 0
}
</style>
--
Gitblit v1.9.1