ReliabilitySimulation.git

			@@ -1,13 +1,17 @@
			<template>
			<div>
			<div class="fa-card-a">

			<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 ref="configNode" v-show="type === 'node'"/>
			<config-edge ref="configEdge" v-show="type === 'edge'"/>
			</div>
			<el-form :inline="true" :model="dataForm" @keyup.enter.native="table.query()">
			<el-form-item :label="modelName"></el-form-item>
			<el-form-item style="float: right">
			<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>
			</template>

			@@ -47,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
			}
			]
			}
			`
			@@ -461,8 +59,8 @@
			},
			data() {
			return {
			nodeX:'',
			nodeY:'',
			nodeX: '',
			nodeY: '',
			isFirstLoad: true,
			hasMoveNode: false,
			hasMoveSingleNode: null,
			@@ -668,17 +266,23 @@
			this.projectId = this.$route.params.projectId
			console.log(this.$route.params.projectId, 'this.$route.params.projectId')
			console.log(this.$route.params.diagramId, 'this.$route.params.diagramId')
			}
			},
			},
			mounted() {
			this.type = 'grid'
			},
			methods: {
			init(row) {
			this.modelName = row.modelName
			this.modelName = row.title
			this.dataForm.id = row.id
			this.collapseTransition = row.collapseTransition
			this.clearDiagram()
			this.initDigram()
			console.log(this.dataForm, 'init(row){')
			},
			closeDigram() {
			this.collapseTransition = 16
			this.$emit('closeWindow', this.collapseTransition)
			},
			async getDiagram(modelId) {
			this.isFirstLoad = true;
			@@ -690,20 +294,22 @@
			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)
			this.isFirstLoad = false;
			console.log(this.diagramJson.cells.length, 'this.diagramJson.cells.length')

			this.graph.positionContent('left')
			// this.graph.positionContent('left')
			this.graph.positionContent('left', {padding: {left: 0}})
			// this.graph.centerContent()
			// this.graph.zoomToFit()
			} else {
			} /*else {
			this.graph.fromJSON(this.RBDDefault)
			this.isFirstLoad = false
			}
			}*/
			},
			async clearDiagram() {
			// this.graph.fromJSON(this.emptyJson)
			@@ -719,7 +325,7 @@
			this.graph = new Graph({
			container: document.getElementById('containerImg'),
			width: document.documentElement.clientWidth,
			height: document.documentElement.clientHeight - 200,
			height: document.documentElement.clientHeight - 240,
			// async: true,
			grid: {
			visible: true,
			@@ -734,23 +340,16 @@
			}
			},
			},
			scroller: {
			enabled: true,
			pageVisible: true,
			autoResize: true,
			pageBreak: true,
			pannable: true,
			minVisibleWidth: 200,
			minVisibleHeight: 200,
			modifiers: 'shift',
			},
			mousewheel: {
			enabled: true,
			zoomAtMousePosition: true,
			modifiers: 'ctrl',
			minScale: 0.5,
			maxScale: 3,
			},
			// scroller: {
			// enabled: true,
			// pageVisible: true,
			// autoResize: true,
			// pageBreak: true,
			// pannable: true,
			// minVisibleWidth: 200,
			// minVisibleHeight: 200,
			// modifiers: 'shift',
			// },
			connecting: {
			router: {
			name: 'manhattan',
			@@ -764,7 +363,7 @@
			anchor: 'center',
			connectionPoint: 'anchor',
			allowBlank: false,
			allowLoop:false, // 是否允许创建循环连线，即边的起始节点和终止节点为同一节点，默认为 true
			allowLoop: false, // 是否允许创建循环连线，即边的起始节点和终止节点为同一节点，默认为 true
			snap: {
			radius: 20,
			},
			@@ -822,12 +421,12 @@
			},
			resizing: true,
			rotating: true,
			selecting: {
			enabled: true,
			rubberband: true,
			rubberEdge: true,
			showNodeSelectionBox: true,
			},
			// selecting: {
			// enabled: true,
			// rubberband: true,
			// rubberEdge: true,
			// showNodeSelectionBox: true,
			// },
			snapline: true,
			keyboard: true,
			clipboard: true,
			@@ -1120,7 +719,7 @@
			})
			return false
			})
			}else if (this.isMultipleBrach(node)) {
			} else if (this.isMultipleBrach(node)) {
			//提示是否要删除
			this.$confirm('是否删除该节点?', '提示', {
			confirmButtonText: '确定',
			@@ -1148,7 +747,7 @@
			})
			return false
			})
			}else {
			} else {
			//提示不能删除
			this.$message({message: '该条线路上只有该节点，无法删除', type: 'warning'})
			return false; // 取消操作
			@@ -1179,13 +778,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)
			}
			}
			@@ -1198,13 +797,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; // 取消添加节点操作
			}
			@@ -1451,8 +1050,8 @@
			leftTopY = centerY
			let dragNodeType = dragNode.getData().nodeType
			if (dragNodeType === 'node') {
			width = 60
			height = 60
			width = 100
			height = 70
			} else if (dragNodeType === 'dashedBox') {
			width = 60
			height = 40
			@@ -1461,7 +1060,7 @@
			height = 175
			} else {
			width = 270
			height = 60
			height = 70
			}
			leftTopX = centerX - width / 2
			leftTopY = centerY - height / 2