From cffbff8eb7af88fb4d8f9d3f6ce77f46e97ddf39 Mon Sep 17 00:00:00 2001 From: jinlin <jinlin> Date: 星期五, 28 六月 2024 15:39:37 +0800 Subject: [PATCH] 修改 --- web/src/views/modules/taskReliability/RBD-edit-img.vue | 606 +++++++++++++++++++++++++++--------------------------- 1 files changed, 306 insertions(+), 300 deletions(-) diff --git a/web/src/views/modules/taskReliability/RBD-edit-img.vue b/web/src/views/modules/taskReliability/RBD-edit-img.vue index a236bc2..d5b1d01 100644 --- a/web/src/views/modules/taskReliability/RBD-edit-img.vue +++ b/web/src/views/modules/taskReliability/RBD-edit-img.vue @@ -48,12 +48,8 @@ <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 v-show="type === 'node'" :id="id" :diagramId="diagramId" :globalGridAttr="globalGridAttr" - :graph="graph" - :nodeType="nodeType" - :projectId="projectId" - :shape="shape"/> - <config-edge v-show="type === 'edge'" :id="id" :globalGridAttr="globalGridAttr" :graph="graph"/> + <config-node ref="configNode" v-show="type === 'node'"/> + <config-edge ref="configEdge" v-show="type === 'edge'"/> </div> </el-col> </el-row> @@ -62,19 +58,15 @@ <script> import {Graph, Shape, Addon, Cell} from '@antv/x6' - import ConfigNode from './ConfigNode/index.vue' - import ConfigEdge from './ConfigEdge/index.vue' - import {removeCurrentTabHandle} from '@/commonJS/common' + import ConfigNode from './ConfigNode/configNode.vue' + import ConfigEdge from './ConfigEdge/configEdge.vue' import {setHartBeat} from '@/commonJS/common'; import Cookies from 'js-cookie' import {getUUID} from '../../../../packages/utils' - import RBDDefault from './RBD-default.json' + // import RBDDefault from './RBD-default.json' export default { name: 'RBD-edit-img', - /*props: { - - },*/ props: { projectId: { type: String @@ -94,230 +86,13 @@ ConfigNode, ConfigEdge }, - data() { - return { - isFirstLoad: true, - hasMoveNode: false, - hasMoveSingleNode: null, - nodeAdded: false, - connectNode: {}, - modelId: '', - modelName: '', - modelType: '', - timer: null, - imagesList: [ - // {imgPath: 'start', imgName: 'start', nodeType: 'start', imgWidth: 60, imgHeight: 60, imgId: '1', data: {}}, - // {imgPath: 'end', imgName: 'end', nodeType: 'end', imgWidth: 60, imgHeight: 60, imgId: '2', data: {}}, - // { - // imgPath: 'connect', - // imgName: 'connect', - // nodeType: 'connect', - // imgWidth: 30, - // imgHeight: 30, - // imgId: '3', - // data: {} - // }, - // { - // imgPath: 'connect', - // imgName: 'bridge', - // nodeType: 'bridge', - // imgWidth: 50, - // imgHeight: 50, - // imgId: '12', - // data: {} - // }, - { - imgPath: 'parallel', - imgName: 'parallel', - nodeType: 'parallel', - imgWidth: 50, - imgHeight: 50, - imgId: '9', - data: {} - }, - {imgPath: 'vote', imgName: 'vote', nodeType: 'vote', imgWidth: 50, imgHeight: 50, imgId: '6', data: {}}, - { - imgPath: 'switch', - imgName: 'switch', - nodeType: 'switch', - imgWidth: 50, - imgHeight: 50, - imgId: '5', - data: {} - }, - { - imgPath: 'bridgeConnection', - imgName: 'bridgeConnection', - nodeType: 'bridgeConnection', - imgWidth: 50, - imgHeight: 50, - imgId: '10', - data: {} - }, - // { - // imgPath: 'dashedBox', - // imgName: 'dashedBox', - // nodeType: 'dashedBox', - // imgWidth: 60, - // imgHeight: 60, - // imgId: '10000', - // data: {} - // }, - ], - imagesList2: [], - nodeType: '', - first: true, - shape: '', - projectList: [], - diagramList: [], - diagramId: '', - projectId: '', - diagramJson: '', - diagramIdDisabled: false, - dataForm: { - id: null, - content: null, - publishContent: null, - hasPublish: 0, - urlPref: '', - }, - type: '', - id: '', - graph: null, - globalGridAttr: { - productType: '', - voteNum: '', - repairMttcr: '', - repairMttcrOther: '', - repairDistribType: '', - reliabDistribType: '', - taskMtbcfOther: '', - isRepair: 0, - taskMtbcf: '', - numberInputValue: '', - statusImg: '', - nodeTypeExt: '', - type: 'mesh', - size: 10, - color: '#e5e5e5', - thickness: 1, - colorSecond: '#d0d0d0', - thicknessSecond: 1, - factor: 4, - bgColor: '#e5e5e5', - showImage: true, - repeat: 'watermark', - position: 'center', - bgSize: JSON.stringify({width: 150, height: 150}), - opacity: 0.1, - - stroke: '#5F95FF', - strokeWidth: 1, - connector: 'rounded', - router: 'manhattan', - label: '', - nodeStroke: '#5F95FF', - nodeStrokeWidth: 1, - nodeFill: '#ffffff', - nodeFontSize: 12, - nodeColor: '#080808', - nodeText: '', - nodeDate: '', - nodeUsers: '', - nodeDataDate: '', - nodeDataText: '', - dataId: '', - inspectName: '', - distance: 0.5, - angle: 0, - }, - isReady: false, - curCel: Cell, - left_p: document.documentElement.clientHeight - 100, - 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', - }, - ], - }, - initJson: { - "cells": [ + computed: { + RBDDefault() { + let url = `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getSvgImage?token=${Cookies.get('token')}&id=` + let result = ` + { + "cells": + [ { "position": { "x": -600, @@ -325,7 +100,7 @@ }, "size": { "width": 60, - "height": 60 + "height": 40 }, "attrs": { "text": { @@ -335,7 +110,7 @@ "refY2": 4 }, "image": { - "xlink:href": "/modelImg/start.svg" + "xlink:href": "${url}10011" } }, "visible": true, @@ -447,8 +222,8 @@ "y": 0 }, "size": { - "width": 100, - "height": 60 + "width": 60, + "height": 40 }, "attrs": { "text": { @@ -458,7 +233,7 @@ "refY2": 4 }, "image": { - "xlink:href": "/modelImg/dashedBox.svg" + "xlink:href": "${url}10015" } }, "visible": true, @@ -570,7 +345,7 @@ }, "size": { "width": 60, - "height": 60 + "height": 40 }, "attrs": { "text": { @@ -580,7 +355,7 @@ "refY2": 4 }, "image": { - "xlink:href": "/modelImg/end.svg" + "xlink:href": "${url}10012" } }, "visible": true, @@ -726,6 +501,217 @@ } ] } + ` + return JSON.parse(result) + } + }, + data() { + return { + isFirstLoad: true, + hasMoveNode: false, + hasMoveSingleNode: null, + nodeAdded: false, + connectNode: {}, + modelId: '', + modelName: '', + modelType: '', + timer: null, + imagesList: [ + { + imgPath: 'parallel', + imgName: 'parallel', + nodeType: 'parallel', + imgWidth: 50, + imgHeight: 50, + imgId: '9', + data: {} + }, + {imgPath: 'vote', imgName: 'vote', nodeType: 'vote', imgWidth: 50, imgHeight: 50, imgId: '6', data: {}}, + { + imgPath: 'switch', + imgName: 'switch', + nodeType: 'switch', + imgWidth: 50, + imgHeight: 50, + imgId: '5', + data: {} + }, + { + imgPath: 'bridgeConnection', + imgName: 'bridgeConnection', + nodeType: 'bridgeConnection', + imgWidth: 50, + imgHeight: 50, + imgId: '10', + data: {} + }, + // { + // imgPath: 'dashedBox', + // imgName: 'dashedBox', + // nodeType: 'dashedBox', + // imgWidth: 60, + // imgHeight: 60, + // imgId: '10000', + // data: {} + // }, + ], + imagesList2: [], + nodeType: '', + first: true, + shape: '', + projectList: [], + diagramList: [], + diagramId: '', + projectId: '', + diagramJson: '', + diagramIdDisabled: false, + dataForm: { + id: null, + pid: null, + model_tag: '', + model_name: '', + product_id: null, + content: null, + publishContent: null, + hasPublish: 0, + urlPref: '', + nodeArr: [] + }, + type: '', + id: '', + graph: null, + globalGridAttr: { + productType: '', + voteNum: '', + repairMttcr: '', + repairMttcrOther: '', + repairDistribType: '', + reliabDistribType: '', + taskMtbcfOther: '', + isRepair: 0, + taskMtbcf: '', + numberInputValue: '', + statusImg: '', + nodeTypeExt: '', + type: 'mesh', + size: 10, + color: '#e5e5e5', + thickness: 1, + colorSecond: '#d0d0d0', + thicknessSecond: 1, + factor: 4, + bgColor: '#e5e5e5', + showImage: true, + repeat: 'watermark', + position: 'center', + bgSize: JSON.stringify({width: 150, height: 150}), + opacity: 0.1, + + stroke: '#5F95FF', + strokeWidth: 1, + connector: 'rounded', + router: 'manhattan', + label: '', + nodeStroke: '#5F95FF', + nodeStrokeWidth: 1, + nodeFill: '#ffffff', + nodeFontSize: 12, + nodeColor: '#080808', + nodeText: '', + nodeDate: '', + nodeUsers: '', + nodeDataDate: '', + nodeDataText: '', + dataId: '', + inspectName: '', + distance: 0.5, + angle: 0, + }, + isReady: false, + curCel: Cell, + left_p: document.documentElement.clientHeight - 100, + 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', + }, + ], + } } }, watch: { @@ -758,8 +744,10 @@ token: Cookies.get('token'), } let res = await this.$http.get(`/taskReliability/ModelLine/getDiagram`, {params: params}) - if (res.data !== null && (res.data.content != null)) { - this.dataForm = res.data + this.dataForm = res.data + if (res.data.content != null) { + console.log(this.dataForm, 'getDiagram datafrom') + console.log(res.data, 'getDiagram res.data') this.diagramJson = JSON.parse(this.dataForm.content) this.graph.fromJSON(this.diagramJson) this.isFirstLoad = false; @@ -769,14 +757,14 @@ // this.graph.centerContent() // this.graph.zoomToFit() } else { - this.graph.fromJSON(RBDDefault) + this.graph.fromJSON(this.RBDDefault) this.isFirstLoad = false } }, async clearDiagram() { - this.dataForm.id = null // this.graph.fromJSON(this.emptyJson) - this.graph.fromJSON(RBDDefault) + console.log(this.RBDDefault, 'clearDiagram') + this.graph.fromJSON(this.RBDDefault) this.graph.positionContent('left') this.isFirstLoad = false; // this.graph.centerContent() @@ -805,9 +793,6 @@ } }, }, - // panning: { - // enabled: true, - // }, scroller: { enabled: true, pageVisible: true, @@ -828,9 +813,6 @@ connecting: { router: { name: 'manhattan', - // args: { - // padding: 1, - // }, }, connector: { name: 'rounded', @@ -848,9 +830,10 @@ return new Shape.Edge({ attrs: { line: { + // sourceMarker: 'block', // 瀹炲績绠ご stroke: '#A2B1C3', strokeWidth: 2, - targetMarker: {fill: 'none'} + targetMarker: null } }, labels: [{ @@ -913,7 +896,7 @@ getDropNode: (node) => { const {width, height} = node.size() if (node.getData().type && node.getData().nodeType === 'dashedBox') { - return node.clone().size(100, 60) + return node.clone().size(60, 40) } if (node.getData().type && node.getData().type === 'imageNodes2') { return node.clone({keepId: true}) @@ -997,9 +980,10 @@ } let res = await this.$http.get(`/basicInfo/XhProductModel/getProduct`, {params: params}) this.imagesList2 = res.data - console.log(this.imagesList2, 'getProduct(productId)234567890') - let urlObject = window.URL || window.webkitURL || window; + /*for(let i =0;i<this.imagesList2.length;i++){ + }*/ + console.log(this.imagesList2, 'getProduct(productId)234567890') const imageNodes2 = this.imagesList2.map((item) => this.graph.createNode({ shape: 'image', @@ -1009,18 +993,21 @@ id: item.dataId, // 鎵嬪姩璁剧疆鑺傜偣鐨� ID data: { type: 'imageNodes2', - isRepair: item.isRepair, dataId: item.dataId, nodeType: item.nodeType, nodeTypeExt: item.nodeTypeExt, productType: item.productType, statusImg: item.statusImg, - reliabDistribType: item.reliabDistribType, - repairDistribType: item.repairDistribType, - repairMttcr: item.repairMttcr, - repairMttcrOther: item.repairMttcrOther, + + reliabDistribType: item.reliabDistribType ? item.reliabDistribType : 1, taskMtbcf: item.taskMtbcf, taskMtbcfOther: item.taskMtbcfOther, + + isRepair: item.isRepair, + repairDistribType: item.repairDistribType ? item.repairDistribType : 1, + repairMttcr: item.repairMttcr, + repairMttcrOther: item.repairMttcrOther, + imgHeight: item.imgHeight, imgWidth: item.imgWidth, voteNum: '', @@ -1069,6 +1056,10 @@ ) stencil.load(imageNodes, 'group1') stencil.load(imageNodes2, 'group2') + + this.graph.bindKey(['meta+c', 'ctrl+up'], () => { + console.log('鎸変簡灏忛敭鐩樼殑UP閿�') + }) this.graph.bindKey(['meta+c', 'ctrl+c'], () => { const cells = this.graph.getSelectedCells() @@ -1120,7 +1111,7 @@ }) this.graph.on('blank:click', ({cell}) => { - this.reset() + // this.reset() // this.type.value = "grid" this.type = 'grid' // this.id = cell.id @@ -1157,37 +1148,31 @@ } } node.remove() - - /*//濡傛灉鑺傜偣涓庤妭鐐圭浉浜� - console.log(node.position().x, node.position().x, 'node.position().x') - if (nodeType === 'bridgeConnection') { - this.getBridgeConnection() - }*/ }); 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 + /* this.shape = cell.shape + this.id = cell.id*/ if (this.type === 'node') { - this.nodeType = cell.getData().nodeType - // console.log(this.nodeType, cell.id, 'this.nodeType') + //this.nodeType = cell.getData().nodeType + this.$refs.configNode.loadData(cell) + } else { + this.$refs.configNode.loadData(cell) } - // console.log(this.shape, 'this.shape') - // this.nodeOpt(this.id, this.globalGridAttr) }) //鍗曞嚮杈硅妭鐐� this.graph.on('edge:click', ({edge}) => { - this.reset() - edge.attr('line/stroke', 'orange') - edge.prop('labels/0', { - attrs: { - body: { - stroke: 'orange', - }, - }, - - }) + // this.reset() + // edge.attr('line/stroke', 'orange') + // edge.prop('labels/0', { + // attrs: { + // body: { + // stroke: 'orange', + // }, + // }, + // + // }) }) // 鍗曞嚮node鑺傜偣 this.graph.on('node:click', ({node}) => { @@ -1422,11 +1407,22 @@ }, async saveDiagram() { console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()') + const nodes = this.graph.getNodes() + let nodeArr2 = [] + // 妫�鏌ラ櫎褰撳墠鑺傜偣涔嬪鐨勬墍鏈夎妭鐐圭殑鍖呭洿妗嗘槸鍚︾浉浜� + for (const node of nodes) { + console.log(node, 'saveDiagram node') + if (node.getData().nodeType == 'node' && node.getData().productType != 'product_xdy' && node.getData().dataId) { + nodeArr2.push(node.getData().dataId) + } + } + this.dataForm.nodeArr = nodeArr2 this.dataForm.content = JSON.stringify(this.graph.toJSON()) this.dataForm.urlPref = window.SITE_CONFIG['apiURL'] console.log(this.dataForm, 'dataFrom') await this.$http[this.dataForm.id === null ? 'post' : 'put'](`/taskReliability/ModelLine/`, this.dataForm).then(async res => { if (res.msg === 'success') { + this.$emit('refreshDataList') this.$alert('淇濆瓨鎴愬姛', '鎻愮ず', { confirmButtonText: '纭畾' }) @@ -1435,10 +1431,20 @@ }, async analyzeDiagram() { console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()') + const nodes = this.graph.getNodes() + let nodeArr2 = [] + // 妫�鏌ラ櫎褰撳墠鑺傜偣涔嬪鐨勬墍鏈夎妭鐐圭殑鍖呭洿妗嗘槸鍚︾浉浜� + for (const node of nodes) { + if (node.getData().nodeType === 'node' && node.getData().productType !== 'product_xdy' && node.getData().dataId) { + nodeArr2.push(node.getData().dataId) + } + } + this.dataForm.nodeArr = nodeArr2 this.dataForm.content = JSON.stringify(this.graph.toJSON()) this.dataForm.urlPref = window.SITE_CONFIG['apiURL'] await this.$http['post'](`/taskReliability/ModelLine/analyze`, this.dataForm).then(async res => { if (res.msg === 'success') { + this.$emit('refreshDataList') this.$alert('瑙f瀽鎴愬姛', '鎻愮ず', { confirmButtonText: '纭畾' }) @@ -1678,8 +1684,8 @@ width = 60 height = 60 } else if (dragNodeType === 'dashedBox') { - width = 100 - height = 60 + width = 60 + height = 40 } else if (dragNodeType === 'bridgeConnection') { width = 550 height = 175 @@ -1836,11 +1842,11 @@ const rightTopDashedBox = this.createDashedBox(x + 380, y) const leftConnectNode = this.createConnectNode(x, y + 87) - const alignCenterDashedBox = this.createDashedBox(x + 210, y + 87) + const alignCenterDashedBox = this.createDashedBox(x + 209, y + 87) const rightConnectNode = this.createBridgeNode(x + 530, y + 87) - const leftBottomDashedBox = this.createDashedBox(x + 50, y + 160) - const rightBottomDashedBox = this.createDashedBox(x + 370, y + 160) + const leftBottomDashedBox = this.createDashedBox(x + 40, y + 160) + const rightBottomDashedBox = this.createDashedBox(x + 380, y + 160) rightConnectNode.setData({startNodeId: leftConnectNode.id}) leftConnectNode.setData({endNodeId: rightConnectNode.id}) @@ -1860,39 +1866,39 @@ source: {cell: leftConnectNode, port: 'right1'}, target: {cell: leftTopDashedBox, port: 'left1'}, router: {name: 'manhattan'}, - connector: {name: 'rounded'} + connector: {name: 'rounded'}, }) this.graph.addEdge({ source: {cell: leftConnectNode, port: 'right1'}, target: {cell: leftBottomDashedBox, port: 'left1'}, router: {name: 'manhattan'}, - connector: {name: 'rounded'} + connector: {name: 'rounded'}, }) let edgeTop = this.graph.addEdge({ source: {cell: leftTopDashedBox, port: 'right1'}, target: {cell: rightTopDashedBox, port: 'left1'}, router: {name: 'manhattan'}, - connector: {name: 'rounded'} + connector: {name: 'rounded'}, }) let edgeBottom = this.graph.addEdge({ source: {cell: leftBottomDashedBox, port: 'right1'}, target: {cell: rightBottomDashedBox, port: 'left1'}, router: {name: 'manhattan'}, - connector: {name: 'rounded'} + connector: {name: 'rounded'}, }) this.graph.addEdge({ source: {cell: rightTopDashedBox, port: 'right1'}, target: {cell: rightConnectNode, port: 'left1'}, router: {name: 'manhattan'}, - connector: {name: 'rounded'} + connector: {name: 'rounded'}, }) this.graph.addEdge({ source: {cell: rightBottomDashedBox, port: 'right1'}, target: {cell: rightConnectNode, port: 'left1'}, router: {name: 'manhattan'}, - connector: {name: 'rounded'} + connector: {name: 'rounded'}, }) this.graph.addEdge({ @@ -1915,8 +1921,8 @@ let dashedBox = this.graph.addNode({ shape: 'image', // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'), - width: 100, - height: 60, + width: 60, + height: 40, id: dashId, data: { isSelfCreated: true, -- Gitblit v1.9.1