From 664db98c9e8595ce4dd636a27f480e3a08b81ff5 Mon Sep 17 00:00:00 2001
From: xyc <jc_xiong@hotmail.com>
Date: 星期五, 21 二月 2025 11:13:51 +0800
Subject: [PATCH] 新增可忽略的维修时间
---
web/src/views/modules/taskReliability/ModelView.vue | 745 +++------------------------------------------------------
1 files changed, 41 insertions(+), 704 deletions(-)
diff --git a/web/src/views/modules/taskReliability/ModelView.vue b/web/src/views/modules/taskReliability/ModelView.vue
index c52f956..9f462fa 100644
--- a/web/src/views/modules/taskReliability/ModelView.vue
+++ b/web/src/views/modules/taskReliability/ModelView.vue
@@ -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;
}
--
Gitblit v1.9.1