From 686e9cb12978d559130f816e5c2d2854a13c2f48 Mon Sep 17 00:00:00 2001
From: wente <329538422@qq.com>
Date: 星期三, 22 五月 2024 08:43:31 +0800
Subject: [PATCH] svgEditor
---
web/src/views/modules/taskReliability/RBD-edit-img.vue | 150 +++++++++++++++++++++++++++++++++++--------------
1 files changed, 106 insertions(+), 44 deletions(-)
diff --git a/web/src/views/modules/taskReliability/RBD-edit-img.vue b/web/src/views/modules/taskReliability/RBD-edit-img.vue
index 8566355..07ec2d5 100644
--- a/web/src/views/modules/taskReliability/RBD-edit-img.vue
+++ b/web/src/views/modules/taskReliability/RBD-edit-img.vue
@@ -348,11 +348,7 @@
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)
- } else {
- this.graph.fromJSON(RBDDefault)
- }
this.isFirstLoad = false;
console.log(this.diagramJson.cells.length, 'this.diagramJson.cells.length')
@@ -360,13 +356,16 @@
// this.graph.centerContent()
// this.graph.zoomToFit()
} else {
- await this.clearDiagram()
+ this.graph.fromJSON(RBDDefault)
+ this.isFirstLoad = false
}
},
async clearDiagram() {
this.dataForm.id = null
// this.graph.fromJSON(this.emptyJson)
- this.graph.fromJSON('')
+ this.graph.fromJSON(RBDDefault)
+ this.graph.positionContent('left')
+ this.isFirstLoad = false;
// this.graph.centerContent()
// this.graph.zoomToFit()
// this.graph.freeze()
@@ -586,10 +585,12 @@
let res = await this.$http.get(`/basicInfo/XhProductModel/getProduct`, {params: params})
this.imagesList2 = res.data
console.log(this.imagesList2, 'getProduct(productId)234567890')
+ let urlObject = window.URL || window.webkitURL || window;
+
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
@@ -612,6 +613,10 @@
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,
@@ -689,7 +694,22 @@
if (cells.length === 1) {
let node = cells[0]
if (!node.isNode()) {
- this.$message({message: '璇烽�変腑鑺傜偣', type: 'warning'})
+ this.$confirm('鏄惁鍒犻櫎璇ヨ繛鎺ョ嚎鐐�?', '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
+ }).then(() => {
+ this.$message({
+ type: 'success',
+ message: '鍒犻櫎鎴愬姛!'
+ })
+ }).catch(() => {
+ this.$message({
+ type: 'info',
+ message: '宸插彇娑堝垹闄�'
+ })
+ })
+ // this.$message({message: '璇烽�変腑鑺傜偣', type: 'warning'})
return false; // 鍙栨秷鎿嶄綔
}
let nodeType = node.getData().nodeType
@@ -720,17 +740,17 @@
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 (inLineIsToLine) {
+ inLine[0].target = {cell: outNode.id, port: 'left1'}
+ } else {
+ outLine[0].source = {cell: inNode.id, port: 'right1'}
+ }
if (deleteType === 1){
node.remove()
}
@@ -746,15 +766,37 @@
type: 'info',
message: '宸插彇娑堝垹闄�'
})
+ return false
})
}
if (this.isMultipleBrach(node)) {
//鎻愮ず鏄惁瑕佸垹闄�
- if (deleteType === 1)
- node.remove()
- else
- this.deleteCombination(node)
- return
+ 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
+ })
}
}
//鎻愮ず涓嶈兘鍒犻櫎
@@ -1119,12 +1161,14 @@
let dragNodeType = dragNode.getData().nodeType
let offHeight = 50
if (dragNodeType === 'node') {
- offHeight = 50
+ offHeight = 60
} else if (dragNodeType === 'bridgeConnection') {
- offHeight = 230
+ offHeight = 175
} else {
offHeight = 70
}
+ let centerX = 0, centerY = 0;
+
if (graphNodeType === 'dashedBox') { //铏氭
const edges = this.graph.getConnectedEdges(graphNode); // 鑾峰彇鐢诲竷涓婂師鏈夌殑鑺傜偣鎵�鏈夎繘鏉ョ殑绾�
let inEdges = edges.filter(edge => edge.target.cell === graphNode.id)
@@ -1140,10 +1184,12 @@
endNode = this.graph.getCellById(endNodeId)
}
if (startNode && endNode) {
- let centerY = graphNode.position().y
- let result = this.addNodeAndConnect(graphNode, dragNode, dragNode.position().x, centerY)
+ 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
}
inEdges[0].target = {cell: result.newStartNode.id, port: 'left1'}
@@ -1158,22 +1204,24 @@
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 minX = graphNodeStartNode.position().x + graphNode.getBBox().width+15
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 centerY = graphNodeY+ graphNode.getBBox().height/2 - pointXY.minY > pointXY.maxY - (graphNodeY+ graphNode.getBBox().height/2) ?
+ pointXY.maxY + offHeight/2 + 30 : pointXY.minY - offHeight/2 - 30
let result = this.addNodeAndConnect(null, dragNode, minX, centerY)
if (!result){
dragNode.remove()
+ this.$message({message: '娌℃湁瓒冲鐨勭┖闂存斁缃鑺傜偣锛岃鎵╁ぇ鍓╀綑绌洪棿', type: 'warning'})
return
}
this.graph.addEdge({
@@ -1190,8 +1238,11 @@
})
}
},
- addNodeAndConnect(targetNode, dragNode, leftX, centerY) { // graphCell鏄敾甯冧笂鍘熸湁鐨勮妭鐐广�俤ragNode鏄綋鍓嶆嫋鎷界殑鑺傜偣
- let width =100, height = 80, leftTopX = leftX , leftTopY = centerY
+ addNodeAndConnect(targetNode, dragNode, centerX, centerY) { // graphCell鏄敾甯冧笂鍘熸湁鐨勮妭鐐广�俤ragNode鏄綋鍓嶆嫋鎷界殑鑺傜偣
+ let width =100,
+ height = 80,
+ leftTopX = centerX ,
+ leftTopY = centerY
let dragNodeType = dragNode.getData().nodeType
if (dragNodeType === 'node') {
width =60
@@ -1200,35 +1251,46 @@
width =100
height = 60
} else if (dragNodeType === 'bridgeConnection') {
- width =450
- height = 160
- // leftTopY = 240/2
+ width =550
+ height = 175
} else {
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(leftX, centerY)
+ dragNode.position(leftTopX, leftTopY)
return {newStartNode: dragNode, newEndNode: dragNode}
} else if (dragNodeType === 'bridgeConnection') {
- return this.createBridgeConnection(leftX, centerY, dragNode)
+ return this.createBridgeConnection(leftTopX, leftTopY, dragNode)
} else {
- return this.createParallelBrach(leftX, centerY, dragNode)
+ return this.createParallelBrach(leftTopX, centerY, dragNode)
}
},
// 鐩镐氦鐨勮竟
addNodeAndInsertEdge(graphEdge, dragNode) {
+ const Source = graphEdge.getSourceCell()
+ const Target = graphEdge.getTargetCell()
+
+ let centerY = Source.position().y + Source.getBBox().height/2
+ if (Target.getData().nodeType === 'node'){
+ centerY = Target.position().y + Target.getBBox().height/2
+ }
+
+ console.log(Source,'Source 璧峰鐐逛俊鎭�')
+ console.log(Target,'Target 缁堟鐐逛俊鎭�')
+ console.log(Source.position().y,'璧峰鐐圭殑Y鍧愭爣')
+ console.log(Target.position().y,'缁堟鐐圭殑Y鍧愭爣')
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'
@@ -1247,6 +1309,7 @@
let result = this.addNodeAndConnect(null, dragNode, dragNode.position().x, centerY)
if (!result){
dragNode.remove()
+ this.$message({message: '娌℃湁瓒冲鐨勭┖闂存斁缃鑺傜偣锛岃鎵╁ぇ鍓╀綑绌洪棿', type: 'warning'})
return
}
if (isRight) {
@@ -1257,7 +1320,6 @@
router: {name: 'manhattan'},
connector: {name: 'rounded'}
})
-
} else {
this.graph.addEdge({
source: {cell: startNode, port: startPort},
@@ -1327,15 +1389,16 @@
})*/
},
createBridgeConnection(x, y, dragNode) {
- const leftTopDashedBox = this.createDashedBox(x + 120, y)
- const rightTopDashedBox = this.createDashedBox(x + 400, y)
+ 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+ 210, 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+ 50, y + 160)
+ const rightBottomDashedBox = this.createDashedBox(x + 370 , y + 160)
rightConnectNode.setData({startNodeId: leftConnectNode.id})
leftConnectNode.setData({endNodeId: rightConnectNode.id})
@@ -1445,7 +1508,6 @@
const dragNodeId = getUUID().toString()
let connectNode = this.graph.addNode({
shape: 'image',
- // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
width: 10,
height: 10,
id: connectId,
--
Gitblit v1.9.1