ReliabilitySimulation.git

			@@ -6,11 +6,12 @@
			<el-button type="danger" @click="closeDigram()">关闭</el-button>
			</el-form-item>
			</el-form>
			<div style="border: 1px solid #EAEBEE;border-radius: 6px;box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);height: calc(100vh - 233px);">
			<div id="containerImg"></div>
			</div>
			<config-node ref="configNode" v-show="type === 'node'"/>
			<config-edge ref="configEdge" v-show="type === 'edge'"/>
			<div
			style="border: 1px solid #EAEBEE;border-radius: 6px;box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);height: calc(100vh - 233px);">
			<div id="containerImg1"></div>
			</div>
			<config-node ref="configNode" v-show="type === 'node'"/>
			<config-edge ref="configEdge" v-show="type === 'edge'"/>
			</div>
			</template>

			@@ -50,412 +51,6 @@
			{
			"cells":
			[
			{
			"position": {
			"x": -600,
			"y": 0
			},
			"size": {
			"width": 60,
			"height": 40
			},
			"attrs": {
			"text": {
			"refY": "100%",
			"textVerticalAnchor": "top",
			"text": "start",
			"refY2": 4
			},
			"image": {
			"xlink:href": "${url}10011"
			}
			},
			"visible": true,
			"shape": "image",
			"id": "10000",
			"data": {
			"type": "imageNodes",
			"endNodeId": "20000",
			"dataId": "",
			"nodeType": "start",
			"nodeTypeExt": "",
			"voteNum": ""
			},
			"ports": {
			"groups": {
			"top": {
			"position": {
			"name": "top"
			},
			"attrs": {
			"circle": {
			"r": 4,
			"magnet": true,
			"stroke": "#5F95FF",
			"strokeWidth": 1,
			"fill": "#fff",
			"style": {
			"visibility": "hidden"
			}
			}
			}
			},
			"right": {
			"position": {
			"name": "right"
			},
			"attrs": {
			"circle": {
			"r": 4,
			"magnet": true,
			"stroke": "#5F95FF",
			"strokeWidth": 1,
			"fill": "#fff",
			"style": {
			"visibility": "hidden"
			}
			}
			}
			},
			"bottom": {
			"position": {
			"name": "bottom"
			},
			"attrs": {
			"circle": {
			"r": 4,
			"magnet": true,
			"stroke": "#5F95FF",
			"strokeWidth": 1,
			"fill": "#fff",
			"style": {
			"visibility": "hidden"
			}
			}
			}
			},
			"left": {
			"position": {
			"name": "left"
			},
			"attrs": {
			"circle": {
			"r": 4,
			"magnet": true,
			"stroke": "#5F95FF",
			"strokeWidth": 1,
			"fill": "#fff",
			"style": {
			"visibility": "hidden"
			}
			}
			}
			}
			},
			"items": [
			{
			"id": "top1",
			"group": "top"
			},
			{
			"id": "right1",
			"group": "right"
			},
			{
			"id": "bottom1",
			"group": "bottom"
			},
			{
			"id": "left1",
			"group": "left"
			}
			]
			},
			"zIndex": 1
			},
			{
			"position": {
			"x": 0,
			"y": 0
			},
			"size": {
			"width": 60,
			"height": 40
			},
			"attrs": {
			"text": {
			"refY": "100%",
			"textVerticalAnchor": "top",
			"text": "dashedBox",
			"refY2": 4
			},
			"image": {
			"xlink:href": "${url}10015"
			}
			},
			"visible": true,
			"shape": "image",
			"id": 15000,
			"data": {
			"type": "imageNodes",
			"dataId": "",
			"nodeType": "dashedBox",
			"nodeTypeExt": "",
			"voteNum": ""
			},
			"ports": {
			"groups": {
			"top": {
			"position": {
			"name": "top"
			},
			"attrs": {
			"circle": {
			"r": 4,
			"magnet": true,
			"stroke": "#5F95FF",
			"strokeWidth": 1,
			"fill": "#fff",
			"style": {
			"visibility": "hidden"
			}
			}
			}
			},
			"right": {
			"position": {
			"name": "right"
			},
			"attrs": {
			"circle": {
			"r": 4,
			"magnet": true,
			"stroke": "#5F95FF",
			"strokeWidth": 1,
			"fill": "#fff",
			"style": {
			"visibility": "hidden"
			}
			}
			}
			},
			"bottom": {
			"position": {
			"name": "bottom"
			},
			"attrs": {
			"circle": {
			"r": 4,
			"magnet": true,
			"stroke": "#5F95FF",
			"strokeWidth": 1,
			"fill": "#fff",
			"style": {
			"visibility": "hidden"
			}
			}
			}
			},
			"left": {
			"position": {
			"name": "left"
			},
			"attrs": {
			"circle": {
			"r": 4,
			"magnet": true,
			"stroke": "#5F95FF",
			"strokeWidth": 1,
			"fill": "#fff",
			"style": {
			"visibility": "hidden"
			}
			}
			}
			}
			},
			"items": [
			{
			"id": "top1",
			"group": "top"
			},
			{
			"id": "right1",
			"group": "right"
			},
			{
			"id": "bottom1",
			"group": "bottom"
			},
			{
			"id": "left1",
			"group": "left"
			}
			]
			},
			"zIndex": 2
			},
			{
			"position": {
			"x": 600,
			"y": 0
			},
			"size": {
			"width": 60,
			"height": 40
			},
			"attrs": {
			"text": {
			"refY": "100%",
			"textVerticalAnchor": "top",
			"text": "end",
			"refY2": 4
			},
			"image": {
			"xlink:href": "${url}10012"
			}
			},
			"visible": true,
			"shape": "image",
			"id": "20000",
			"data": {
			"type": "imageNodes",
			"startNodeId": "10000",
			"dataId": "",
			"nodeType": "end",
			"nodeTypeExt": "",
			"voteNum": ""
			},
			"ports": {
			"groups": {
			"top": {
			"position": {
			"name": "top"
			},
			"attrs": {
			"circle": {
			"r": 4,
			"magnet": true,
			"stroke": "#5F95FF",
			"strokeWidth": 1,
			"fill": "#fff",
			"style": {
			"visibility": "hidden"
			}
			}
			}
			},
			"right": {
			"position": {
			"name": "right"
			},
			"attrs": {
			"circle": {
			"r": 4,
			"magnet": true,
			"stroke": "#5F95FF",
			"strokeWidth": 1,
			"fill": "#fff",
			"style": {
			"visibility": "hidden"
			}
			}
			}
			},
			"bottom": {
			"position": {
			"name": "bottom"
			},
			"attrs": {
			"circle": {
			"r": 4,
			"magnet": true,
			"stroke": "#5F95FF",
			"strokeWidth": 1,
			"fill": "#fff",
			"style": {
			"visibility": "hidden"
			}
			}
			}
			},
			"left": {
			"position": {
			"name": "left"
			},
			"attrs": {
			"circle": {
			"r": 4,
			"magnet": true,
			"stroke": "#5F95FF",
			"strokeWidth": 1,
			"fill": "#fff",
			"style": {
			"visibility": "hidden"
			}
			}
			}
			}
			},
			"items": [
			{
			"id": "top1",
			"group": "top"
			},
			{
			"id": "right1",
			"group": "right"
			},
			{
			"id": "bottom1",
			"group": "bottom"
			},
			{
			"id": "left1",
			"group": "left"
			}
			]
			},
			"zIndex": 3
			},
			{
			"shape": "edge",
			"id": "66c81c68-0827-4a3c-8343-e2c453d3e9e7",
			"router": {
			"name": "manhattan"
			},
			"connector": {
			"name": "rounded"
			},
			"source": {
			"cell": "10000",
			"port": "right1"
			},
			"target": {
			"cell": 15000,
			"port": "left1"
			},
			"zIndex": 4
			},
			{
			"shape": "edge",
			"id": "a0f3cf90-6d37-4ee0-a254-90b4ec2b6a7f",
			"router": {
			"name": "manhattan"
			},
			"connector": {
			"name": "rounded"
			},
			"source": {
			"cell": 15000,
			"port": "right1"
			},
			"target": {
			"cell": "20000",
			"port": "left1"
			},
			"zIndex": 5
			}
			]
			}
			`
			@@ -464,8 +59,9 @@
			},
			data() {
			return {
			nodeX:'',
			nodeY:'',
			isInitialization:false,
			nodeX: '',
			nodeY: '',
			isFirstLoad: true,
			hasMoveNode: false,
			hasMoveSingleNode: null,
			@@ -681,12 +277,20 @@
			this.modelName = row.title
			this.dataForm.id = row.id
			this.collapseTransition = row.collapseTransition
			// this.clearDiagram()
			// if(!this.isInitialization){
			// this.initDigram()
			// }
			// setTimeout(()=>{
			// console.log(this.graph,'this.graph this.graph')
			// this.getDiagram(this.dataForm.id)
			// },0)
			this.initDigram()
			console.log(this.dataForm, 'init(row){')
			},
			closeDigram(){
			this.collapseTransition = 16
			this.$emit('closeWindow',this.collapseTransition)
			closeDigram() {
			this.collapseTransition = 14
			this.$emit('closeWindow', this.collapseTransition)
			},
			async getDiagram(modelId) {
			this.isFirstLoad = true;
			@@ -698,21 +302,25 @@
			let res = await this.$http.get(`/taskReliability/ModelLine/getDiagram`, {params: params})
			this.dataForm = res.data
			if (res.data.content != null) {
			console.log(this.dataForm, 'getDiagram datafrom')
			console.log(this.dataForm, 'getDiagram datafrom222')
			console.log(res.data, 'getDiagram res.data')

			this.diagramJson = JSON.parse(this.dataForm.content)
			this.graph.fromJSON(this.diagramJson)
			console.log(this.diagramJson, 'this.diagramJson')
			this.isFirstLoad = false;
			console.log(this.diagramJson.cells.length, 'this.diagramJson.cells.length')

			// this.graph.positionContent('left')
			this.graph.positionContent('left',{ padding: { left: 0 }})
			// this.graph.centerContent()
			this.graph.positionContent('left', {padding: {left: 0}})
			this.graph.freeze()

			// this.graph.zoomToFit()
			} else {
			} /*else {
			this.graph.fromJSON(this.RBDDefault)
			this.isFirstLoad = false
			}
			}*/
			},
			async clearDiagram() {
			// this.graph.fromJSON(this.emptyJson)
			@@ -723,10 +331,8 @@
			},
			async initDigram() {
			this.timer = setHartBeat(10, 240);
			console.log(document.documentElement.clientWidth, 'document.documentElement.clientWidth')
			console.log(document.documentElement.clientHeight, 'document.documentElement.clientHeight')
			this.graph = new Graph({
			container: document.getElementById('containerImg'),
			container: document.getElementById('containerImg1'),
			width: document.documentElement.clientWidth,
			height: document.documentElement.clientHeight - 240,
			// async: true,
			@@ -734,285 +340,16 @@
			visible: true,
			},
			autoResize: true,
			history: {
			panning: {
			enabled: true,
			beforeAddCommand(event, args) {
			if (args.key === 'tools') {
			// console.log(args.key, 'event, args')
			return false
			}
			},
			},
			// scroller: {
			// enabled: true,
			// pageVisible: true,
			// autoResize: true,
			// pageBreak: true,
			// pannable: true,
			// minVisibleWidth: 200,
			// minVisibleHeight: 200,
			// modifiers: 'shift',
			// autoResize: false,
			// },
			connecting: {
			router: {
			name: 'manhattan',
			},
			connector: {
			name: 'rounded',
			args: {
			radius: 5,
			},
			},
			anchor: 'center',
			connectionPoint: 'anchor',
			allowBlank: false,
			allowLoop:false, // 是否允许创建循环连线，即边的起始节点和终止节点为同一节点，默认为 true
			snap: {
			radius: 20,
			},
			createEdge() {
			return new Shape.Edge({
			attrs: {
			line: {
			// sourceMarker: 'block', // 实心箭头
			stroke: '#A2B1C3',
			strokeWidth: 2,
			targetMarker: null
			}
			},
			labels: [{
			attrs: {
			body: {
			stroke: '#5F95FF',
			},
			text: {
			text: ''
			}
			},
			position: {
			distance: 0.5,
			angle: 180,
			options: {
			keepGradient: true,
			ensureLegibility: true
			}
			}
			}],
			tools: {
			name: 'segments',
			args: {
			attrs: {fill: '#666'},
			},
			},
			zIndex: -100,
			})
			},
			validateConnection({targetMagnet}) {
			return !!targetMagnet
			},
			},
			highlighting: {
			magnetAdsorbed: {
			name: 'stroke',
			args: {
			attrs: {
			fill: '#5F95FF',
			stroke: '#5F95FF',
			},
			},
			},
			},
			resizing: true,
			rotating: true,
			// selecting: {
			// enabled: true,
			// rubberband: true,
			// rubberEdge: true,
			// showNodeSelectionBox: true,
			// },
			snapline: true,
			keyboard: true,
			clipboard: true,
			})
			this.graph.centerContent()
			this.graph.bindKey(['meta+c', 'ctrl+c'], () => {
			const cells = this.graph.getSelectedCells()
			if (cells.length) {
			this.graph.copy(cells)
			}
			return false
			})

			this.graph.bindKey(['meta+x', 'ctrl+x'], () => {
			const cells = this.graph.getSelectedCells()
			if (cells.length) {
			this.graph.cut(cells)
			}
			return false
			})
			this.graph.bindKey(['meta+v', 'ctrl+v'], () => {
			if (!this.graph.isClipboardEmpty()) {
			const cells = this.graph.paste({offset: 32})
			this.graph.cleanSelection()
			this.graph.select(cells)
			}
			return false
			})
			// select all
			this.graph.bindKey(['meta+a', 'ctrl+a'], () => {
			const nodes = this.graph.getNodes()
			if (nodes) {
			this.graph.select(nodes)
			}
			})
			//delete
			this.graph.bindKey('delete', () => {
			this.deleteCompment()
			})
			// zoom
			this.graph.bindKey(['ctrl+1', 'meta+1'], () => {
			const zoom = this.graph.zoom()
			if (zoom < 1.5) {
			this.graph.zoom(0.1)
			}
			})

			this.graph.bindKey(['ctrl+2', 'meta+2'], () => {
			const zoom = this.graph.zoom()
			if (zoom > 0.5) {
			this.graph.zoom(-0.1)
			}
			})

			this.graph.on('blank:click', ({cell}) => {
			this.type = 'grid'

			})
			// 监听节点添加事件
			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()
			});
			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*/
			if (this.type === 'node') {
			//this.nodeType = cell.getData().nodeType
			this.$refs.configNode.loadData(cell)
			} else {
			this.$refs.configNode.loadData(cell)
			}
			})
			//单击边节点
			this.graph.on('edge:click', ({edge}) => {
			})

			// 控制连接桩显示/隐藏
			this.graph.on('node:delete', ({view, e}) => {
			e.stopPropagation()
			view.cell.remove()
			})

			this.graph.on('node:customevent', ({name, view, e}) => {
			if (name === 'node:delete') {
			e.stopPropagation()
			view.cell.remove()
			}
			})
			// 双击编辑
			this.graph.on('cell:dblclick', ({cell, e}) => {
			const isNode = cell.isNode()
			const name = cell.isNode() ? 'node-editor' : 'edge-editor'
			cell.removeTool(name)
			cell.addTools({
			name,
			args: {
			event: e,
			attrs: {
			backgroundColor: isNode ? '#EFF4FF' : '#FFF',
			text: {
			fontSize: 16,
			fill: '#262626',
			},
			},
			},
			})
			})

			this.graph.on('node:mouseenter', ({node}) => {
			const container = document.getElementById('containerImg')
			const ports = container.querySelectorAll(
			'.x6-port-body',
			)
			this.showPorts(ports, true)
			})

			this.graph.on('node:mouseleave', ({node}) => {
			// if (node.hasTool('button-remove')) {
			// node.removeTool('button-remove')
			// }
			const container = document.getElementById('containerImg')
			const ports = container.querySelectorAll(
			'.x6-port-body',
			)
			this.showPorts(ports, false)
			})

			this.graph.on('edge:mouseenter', ({cell}) => {
			// alert(123)
			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}) => {
			cell.removeTools()
			})

			this.isInitialization = true
			await this.getDiagram(this.dataForm.id)
			},
			showPorts(ports, show) {
			@@ -1122,7 +459,7 @@
			})
			return false
			})
			}else if (this.isMultipleBrach(node)) {
			} else if (this.isMultipleBrach(node)) {
			//提示是否要删除
			this.$confirm('是否删除该节点?', '提示', {
			confirmButtonText: '确定',
			@@ -1150,7 +487,7 @@
			})
			return false
			})
			}else {
			} else {
			//提示不能删除
			this.$message({message: '该条线路上只有该节点，无法删除', type: 'warning'})
			return false; // 取消操作
			@@ -1181,13 +518,13 @@
			}
			})
			},
			getNodeArr(){
			getNodeArr() {
			const nodes = this.graph.getNodes()
			let nodeArr2 = []
			// 检查除当前节点之外的所有节点的包围框是否相交
			for (const node of nodes) {
			console.log(node, 'saveDiagram node')
			if (node.getData().nodeType == 'node' && node.getData().dataId) {
			if (node.getData().nodeType == 'node' && node.getData().dataId) {
			nodeArr2.push(node.getData().dataId)
			}
			}
			@@ -1200,13 +537,13 @@
			this.getNodeArr()
			const nodes = this.graph.getNodes()
			for (const node of nodes) {
			if(node.getData().nodeType === 'dashedBox'){
			if (node.getData().nodeType === 'dashedBox') {
			this.$message({message: '该模型中存在虚框，无法保存', type: 'warning'})
			return false; // 取消添加节点操作
			}
			if(node.getData().nodeType === 'vote'){
			if (node.getData().nodeType === 'vote') {
			const edges = this.graph.getConnectedEdges(node);
			if(node.getData().voteNum>=edges.length){
			if (node.getData().voteNum >= edges.length) {
			this.$message({message: '表决数量不能高于该节点的进线数量', type: 'warning'})
			return false; // 取消添加节点操作
			}
			@@ -1972,9 +1309,9 @@
			</script>

			<style>
			#containerImg {
			#containerImg1 {
			display: flex;
			border: 1px solid #dfe3e8;
			/border: 1px solid #dfe3e8;/
			height: 400px;
			width: 100% !important;
			}