From 5ef47212d7a7d5d8fa2b02674c1f1263b07826d0 Mon Sep 17 00:00:00 2001
From: jinlin <jinlin>
Date: 星期四, 07 十一月 2024 17:45:41 +0800
Subject: [PATCH] 修改工况bug，新增产品节点时存在
---
web/src/views/modules/taskReliability/ModelView.vue | 513 ++++++--------------------------------------------------
1 files changed, 56 insertions(+), 457 deletions(-)
diff --git a/web/src/views/modules/taskReliability/ModelView.vue b/web/src/views/modules/taskReliability/ModelView.vue
index 08fab2a..240ace5 100644
--- a/web/src/views/modules/taskReliability/ModelView.vue
+++ b/web/src/views/modules/taskReliability/ModelView.vue
@@ -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
--
Gitblit v1.9.1