From 4b53d51211eca394c0308692704eedbf2a8374df Mon Sep 17 00:00:00 2001
From: wente <329538422@qq.com>
Date: 星期二, 11 六月 2024 08:58:51 +0800
Subject: [PATCH] svgEditor
---
web/src/views/modules/taskReliability/RBD-edit-img.vue | 547 +++++++++++++++++++++++++++---------------------------
1 files changed, 273 insertions(+), 274 deletions(-)
diff --git a/web/src/views/modules/taskReliability/RBD-edit-img.vue b/web/src/views/modules/taskReliability/RBD-edit-img.vue
index a236bc2..7a07431 100644
--- a/web/src/views/modules/taskReliability/RBD-edit-img.vue
+++ b/web/src/views/modules/taskReliability/RBD-edit-img.vue
@@ -48,12 +48,8 @@
<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>
@@ -62,19 +58,15 @@
<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 RBDDefault from './RBD-default.json'
+ // import RBDDefault from './RBD-default.json'
export default {
name: 'RBD-edit-img',
- /*props: {
-
- },*/
props: {
projectId: {
type: String
@@ -94,230 +86,13 @@
ConfigNode,
ConfigEdge
},
- data() {
- return {
- isFirstLoad: true,
- hasMoveNode: false,
- hasMoveSingleNode: null,
- nodeAdded: false,
- connectNode: {},
- modelId: '',
- modelName: '',
- 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: 'parallel',
- imgName: 'parallel',
- nodeType: 'parallel',
- imgWidth: 50,
- imgHeight: 50,
- imgId: '9',
- data: {}
- },
- {imgPath: 'vote', imgName: 'vote', nodeType: 'vote', imgWidth: 50, imgHeight: 50, imgId: '6', data: {}},
- {
- imgPath: 'switch',
- imgName: 'switch',
- nodeType: 'switch',
- imgWidth: 50,
- imgHeight: 50,
- imgId: '5',
- data: {}
- },
- {
- imgPath: 'bridgeConnection',
- imgName: 'bridgeConnection',
- nodeType: 'bridgeConnection',
- imgWidth: 50,
- imgHeight: 50,
- imgId: '10',
- data: {}
- },
- // {
- // imgPath: 'dashedBox',
- // imgName: 'dashedBox',
- // nodeType: 'dashedBox',
- // imgWidth: 60,
- // imgHeight: 60,
- // imgId: '10000',
- // data: {}
- // },
- ],
- imagesList2: [],
- nodeType: '',
- first: true,
- shape: '',
- projectList: [],
- diagramList: [],
- diagramId: '',
- projectId: '',
- diagramJson: '',
- diagramIdDisabled: false,
- dataForm: {
- id: null,
- content: null,
- publishContent: null,
- hasPublish: 0,
- urlPref: '',
- },
- type: '',
- id: '',
- graph: null,
- globalGridAttr: {
- productType: '',
- voteNum: '',
- repairMttcr: '',
- repairMttcrOther: '',
- repairDistribType: '',
- reliabDistribType: '',
- taskMtbcfOther: '',
- isRepair: 0,
- taskMtbcf: '',
- numberInputValue: '',
- statusImg: '',
- nodeTypeExt: '',
- type: 'mesh',
- size: 10,
- color: '#e5e5e5',
- thickness: 1,
- colorSecond: '#d0d0d0',
- thicknessSecond: 1,
- factor: 4,
- bgColor: '#e5e5e5',
- showImage: true,
- repeat: 'watermark',
- position: 'center',
- bgSize: JSON.stringify({width: 150, height: 150}),
- opacity: 0.1,
-
- stroke: '#5F95FF',
- strokeWidth: 1,
- connector: 'rounded',
- router: 'manhattan',
- label: '',
- nodeStroke: '#5F95FF',
- nodeStrokeWidth: 1,
- nodeFill: '#ffffff',
- nodeFontSize: 12,
- nodeColor: '#080808',
- nodeText: '',
- nodeDate: '',
- nodeUsers: '',
- nodeDataDate: '',
- nodeDataText: '',
- dataId: '',
- inspectName: '',
- distance: 0.5,
- angle: 0,
- },
- isReady: false,
- curCel: Cell,
- left_p: document.documentElement.clientHeight - 100,
- ports: {
- groups: {
- top: {
- position: {name: 'top'},
- attrs: {
- circle: {
- r: 4,
- magnet: true,
- stroke: '#5F95FF',
- strokeWidth: 1,
- fill: '#fff',
- style: {
- visibility: 'hidden',
- },
- },
- },
- },
- right: {
- position: {name: 'right'},
- attrs: {
- circle: {
- r: 4,
- magnet: true,
- stroke: '#5F95FF',
- strokeWidth: 1,
- fill: '#fff',
- style: {
- visibility: 'hidden',
- },
- },
- },
- },
- bottom: {
- position: {name: 'bottom'},
- attrs: {
- circle: {
- r: 4,
- magnet: true,
- stroke: '#5F95FF',
- strokeWidth: 1,
- fill: '#fff',
- style: {
- visibility: 'hidden',
- },
- },
- },
- },
- left: {
- position: {name: 'left'},
- attrs: {
- circle: {
- r: 4,
- magnet: true,
- stroke: '#5F95FF',
- strokeWidth: 1,
- fill: '#fff',
- style: {
- visibility: 'hidden',
- },
- },
- },
- },
- },
- items: [
- {
- id: 'top1',
- group: 'top',
- },
- {
- id: 'right1',
- group: 'right',
- },
- {
- id: 'bottom1',
- group: 'bottom',
- },
- {
- id: 'left1',
- group: 'left',
- },
- ],
- },
- initJson: {
- "cells": [
+ computed: {
+ RBDDefault() {
+ let url = `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getSvgImage?token=${Cookies.get('token')}&id=`
+ let result = `
+ {
+ "cells":
+ [
{
"position": {
"x": -600,
@@ -335,7 +110,7 @@
"refY2": 4
},
"image": {
- "xlink:href": "/modelImg/start.svg"
+ "xlink:href": "${url}10011"
}
},
"visible": true,
@@ -447,7 +222,7 @@
"y": 0
},
"size": {
- "width": 100,
+ "width": 60,
"height": 60
},
"attrs": {
@@ -458,7 +233,7 @@
"refY2": 4
},
"image": {
- "xlink:href": "/modelImg/dashedBox.svg"
+ "xlink:href": "${url}10015"
}
},
"visible": true,
@@ -580,7 +355,7 @@
"refY2": 4
},
"image": {
- "xlink:href": "/modelImg/end.svg"
+ "xlink:href": "${url}10012"
}
},
"visible": true,
@@ -726,6 +501,217 @@
}
]
}
+ `
+ return JSON.parse(result)
+ }
+ },
+ data() {
+ return {
+ isFirstLoad: true,
+ hasMoveNode: false,
+ hasMoveSingleNode: null,
+ nodeAdded: false,
+ connectNode: {},
+ modelId: '',
+ modelName: '',
+ modelType: '',
+ timer: null,
+ imagesList: [
+ {
+ imgPath: 'parallel',
+ imgName: 'parallel',
+ nodeType: 'parallel',
+ imgWidth: 50,
+ imgHeight: 50,
+ imgId: '9',
+ data: {}
+ },
+ {imgPath: 'vote', imgName: 'vote', nodeType: 'vote', imgWidth: 50, imgHeight: 50, imgId: '6', data: {}},
+ {
+ imgPath: 'switch',
+ imgName: 'switch',
+ nodeType: 'switch',
+ imgWidth: 50,
+ imgHeight: 50,
+ imgId: '5',
+ data: {}
+ },
+ {
+ imgPath: 'bridgeConnection',
+ imgName: 'bridgeConnection',
+ nodeType: 'bridgeConnection',
+ imgWidth: 50,
+ imgHeight: 50,
+ imgId: '10',
+ data: {}
+ },
+ // {
+ // imgPath: 'dashedBox',
+ // imgName: 'dashedBox',
+ // nodeType: 'dashedBox',
+ // imgWidth: 60,
+ // imgHeight: 60,
+ // imgId: '10000',
+ // data: {}
+ // },
+ ],
+ imagesList2: [],
+ nodeType: '',
+ first: true,
+ shape: '',
+ projectList: [],
+ diagramList: [],
+ diagramId: '',
+ projectId: '',
+ diagramJson: '',
+ diagramIdDisabled: false,
+ dataForm: {
+ id: null,
+ pid: null,
+ model_tag: '',
+ model_name: '',
+ product_id: null,
+ content: null,
+ publishContent: null,
+ hasPublish: 0,
+ urlPref: '',
+ nodeArr: []
+ },
+ type: '',
+ id: '',
+ graph: null,
+ globalGridAttr: {
+ productType: '',
+ voteNum: '',
+ repairMttcr: '',
+ repairMttcrOther: '',
+ repairDistribType: '',
+ reliabDistribType: '',
+ taskMtbcfOther: '',
+ isRepair: 0,
+ taskMtbcf: '',
+ numberInputValue: '',
+ statusImg: '',
+ nodeTypeExt: '',
+ type: 'mesh',
+ size: 10,
+ color: '#e5e5e5',
+ thickness: 1,
+ colorSecond: '#d0d0d0',
+ thicknessSecond: 1,
+ factor: 4,
+ bgColor: '#e5e5e5',
+ showImage: true,
+ repeat: 'watermark',
+ position: 'center',
+ bgSize: JSON.stringify({width: 150, height: 150}),
+ opacity: 0.1,
+
+ stroke: '#5F95FF',
+ strokeWidth: 1,
+ connector: 'rounded',
+ router: 'manhattan',
+ label: '',
+ nodeStroke: '#5F95FF',
+ nodeStrokeWidth: 1,
+ nodeFill: '#ffffff',
+ nodeFontSize: 12,
+ nodeColor: '#080808',
+ nodeText: '',
+ nodeDate: '',
+ nodeUsers: '',
+ nodeDataDate: '',
+ nodeDataText: '',
+ dataId: '',
+ inspectName: '',
+ distance: 0.5,
+ angle: 0,
+ },
+ isReady: false,
+ curCel: Cell,
+ left_p: document.documentElement.clientHeight - 100,
+ ports: {
+ groups: {
+ top: {
+ position: {name: 'top'},
+ attrs: {
+ circle: {
+ r: 4,
+ magnet: true,
+ stroke: '#5F95FF',
+ strokeWidth: 1,
+ fill: '#fff',
+ style: {
+ visibility: 'hidden',
+ },
+ },
+ },
+ },
+ right: {
+ position: {name: 'right'},
+ attrs: {
+ circle: {
+ r: 4,
+ magnet: true,
+ stroke: '#5F95FF',
+ strokeWidth: 1,
+ fill: '#fff',
+ style: {
+ visibility: 'hidden',
+ },
+ },
+ },
+ },
+ bottom: {
+ position: {name: 'bottom'},
+ attrs: {
+ circle: {
+ r: 4,
+ magnet: true,
+ stroke: '#5F95FF',
+ strokeWidth: 1,
+ fill: '#fff',
+ style: {
+ visibility: 'hidden',
+ },
+ },
+ },
+ },
+ left: {
+ position: {name: 'left'},
+ attrs: {
+ circle: {
+ r: 4,
+ magnet: true,
+ stroke: '#5F95FF',
+ strokeWidth: 1,
+ fill: '#fff',
+ style: {
+ visibility: 'hidden',
+ },
+ },
+ },
+ },
+ },
+ items: [
+ {
+ id: 'top1',
+ group: 'top',
+ },
+ {
+ id: 'right1',
+ group: 'right',
+ },
+ {
+ id: 'bottom1',
+ group: 'bottom',
+ },
+ {
+ id: 'left1',
+ group: 'left',
+ },
+ ],
+ }
}
},
watch: {
@@ -758,8 +744,10 @@
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)
this.graph.fromJSON(this.diagramJson)
this.isFirstLoad = false;
@@ -769,14 +757,14 @@
// this.graph.centerContent()
// this.graph.zoomToFit()
} else {
- this.graph.fromJSON(RBDDefault)
+ this.graph.fromJSON(this.RBDDefault)
this.isFirstLoad = false
}
},
async clearDiagram() {
- this.dataForm.id = null
// this.graph.fromJSON(this.emptyJson)
- this.graph.fromJSON(RBDDefault)
+ console.log(this.RBDDefault, 'clearDiagram')
+ this.graph.fromJSON(this.RBDDefault)
this.graph.positionContent('left')
this.isFirstLoad = false;
// this.graph.centerContent()
@@ -805,9 +793,6 @@
}
},
},
- // panning: {
- // enabled: true,
- // },
scroller: {
enabled: true,
pageVisible: true,
@@ -828,9 +813,6 @@
connecting: {
router: {
name: 'manhattan',
- // args: {
- // padding: 1,
- // },
},
connector: {
name: 'rounded',
@@ -913,7 +895,7 @@
getDropNode: (node) => {
const {width, height} = node.size()
if (node.getData().type && node.getData().nodeType === 'dashedBox') {
- return node.clone().size(100, 60)
+ return node.clone().size(60, 60)
}
if (node.getData().type && node.getData().type === 'imageNodes2') {
return node.clone({keepId: true})
@@ -997,9 +979,10 @@
}
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;
+ /*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',
@@ -1009,18 +992,21 @@
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,
+
+ isRepair: item.isRepair,
+ repairDistribType: item.repairDistribType ? item.repairDistribType : 1,
+ repairMttcr: item.repairMttcr,
+ repairMttcrOther: item.repairMttcrOther,
+
imgHeight: item.imgHeight,
imgWidth: item.imgWidth,
voteNum: '',
@@ -1157,24 +1143,18 @@
}
}
node.remove()
-
- /*//濡傛灉鑺傜偣涓庤妭鐐圭浉浜�
- console.log(node.position().x, node.position().x, 'node.position().x')
- if (nodeType === 'bridgeConnection') {
- this.getBridgeConnection()
- }*/
});
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}) => {
@@ -1422,6 +1402,16 @@
},
async saveDiagram() {
console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
+ const nodes = this.graph.getNodes()
+ let nodeArr2 = []
+ // 妫�鏌ラ櫎褰撳墠鑺傜偣涔嬪鐨勬墍鏈夎妭鐐圭殑鍖呭洿妗嗘槸鍚︾浉浜�
+ for (const node of nodes) {
+ console.log(node, 'saveDiagram node')
+ if (node.getData().nodeType == 'node' && node.getData().productType != 'product_xdy' && node.getData().dataId) {
+ nodeArr2.push(node.getData().dataId)
+ }
+ }
+ this.dataForm.nodeArr = nodeArr2
this.dataForm.content = JSON.stringify(this.graph.toJSON())
this.dataForm.urlPref = window.SITE_CONFIG['apiURL']
console.log(this.dataForm, 'dataFrom')
@@ -1435,6 +1425,15 @@
},
async analyzeDiagram() {
console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
+ const nodes = this.graph.getNodes()
+ let nodeArr2 = []
+ // 妫�鏌ラ櫎褰撳墠鑺傜偣涔嬪鐨勬墍鏈夎妭鐐圭殑鍖呭洿妗嗘槸鍚︾浉浜�
+ for (const node of nodes) {
+ if (node.getData().nodeType === 'node' && node.getData().productType !== 'product_xdy' && node.getData().dataId) {
+ nodeArr2.push(node.getData().dataId)
+ }
+ }
+ this.dataForm.nodeArr = nodeArr2
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 => {
@@ -1678,7 +1677,7 @@
width = 60
height = 60
} else if (dragNodeType === 'dashedBox') {
- width = 100
+ width = 60
height = 60
} else if (dragNodeType === 'bridgeConnection') {
width = 550
@@ -1915,7 +1914,7 @@
let dashedBox = this.graph.addNode({
shape: 'image',
// imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
- width: 100,
+ width: 60,
height: 60,
id: dashId,
data: {
--
Gitblit v1.9.1