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 | 783 ++++---------------------------------------------------
1 files changed, 61 insertions(+), 722 deletions(-)
diff --git a/web/src/views/modules/taskReliability/ModelView.vue b/web/src/views/modules/taskReliability/ModelView.vue
index 9307dba..9f462fa 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="containerImg1"></div>
+ </div>
+ <config-node ref="configNode" v-show="type === 'node'"/>
+ <config-edge ref="configEdge" v-show="type === 'edge'"/>
</div>
</template>
@@ -20,7 +24,7 @@
import {getUUID} from '../../../../packages/utils'
export default {
- name: 'RBD-edit-img',
+ name: 'model-view',
props: {
projectId: {
type: String
@@ -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,9 @@
},
data() {
return {
- nodeX:'',
- nodeY:'',
+ isInitialization:false,
+ nodeX: '',
+ nodeY: '',
isFirstLoad: true,
hasMoveNode: false,
hasMoveSingleNode: null,
@@ -668,17 +267,30 @@
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()
+ // 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 = 14
+ this.$emit('closeWindow', this.collapseTransition)
},
async getDiagram(modelId) {
this.isFirstLoad = true;
@@ -690,20 +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')
// 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)
@@ -714,303 +331,25 @@
},
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 - 200,
+ height: document.documentElement.clientHeight - 240,
// async: true,
grid: {
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',
- },
- mousewheel: {
- enabled: true,
- zoomAtMousePosition: true,
- modifiers: 'ctrl',
- minScale: 0.5,
- maxScale: 3,
- },
- 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,
+ // scroller: {
+ // enabled: true,
+ // pannable: true,
+ // autoResize: false,
+ // },
})
- 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) {
@@ -1120,7 +459,7 @@
})
return false
})
- }else if (this.isMultipleBrach(node)) {
+ } else if (this.isMultipleBrach(node)) {
//鎻愮ず鏄惁瑕佸垹闄�
this.$confirm('鏄惁鍒犻櫎璇ヨ妭鐐�?', '鎻愮ず', {
confirmButtonText: '纭畾',
@@ -1148,7 +487,7 @@
})
return false
})
- }else {
+ } else {
//鎻愮ず涓嶈兘鍒犻櫎
this.$message({message: '璇ユ潯绾胯矾涓婂彧鏈夎鑺傜偣锛屾棤娉曞垹闄�', type: 'warning'})
return false; // 鍙栨秷鎿嶄綔
@@ -1179,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)
}
}
@@ -1198,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; // 鍙栨秷娣诲姞鑺傜偣鎿嶄綔
}
@@ -1451,8 +790,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 +800,7 @@
height = 175
} else {
width = 270
- height = 60
+ height = 70
}
leftTopX = centerX - width / 2
leftTopY = centerY - height / 2
@@ -1970,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