From 8c834663344b1cc9c2ca569e6911900edd407f73 Mon Sep 17 00:00:00 2001 From: jinlin <jinlin> Date: 星期四, 06 六月 2024 16:44:14 +0800 Subject: [PATCH] 修改 --- web/src/views/modules/taskReliability/RBD-edit-img.vue | 535 ++++++++++++++++++++++++++++++++++++++++++++++++++++------- 1 files changed, 472 insertions(+), 63 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..bc9afcc 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,6 +86,425 @@ ConfigNode, ConfigEdge }, + computed: { + RBDDefault() { + let url = `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getSvgImage?token=${Cookies.get('token')}&id=` + let result = ` + { + "cells": + [ + { + "position": { + "x": -600, + "y": 0 + }, + "size": { + "width": 60, + "height": 60 + }, + "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": 100, + "height": 60 + }, + "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": 60 + }, + "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 + } + ] + } + ` + return JSON.parse(result) + } + }, data() { return { isFirstLoad: true, @@ -106,26 +517,6 @@ 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', @@ -176,10 +567,15 @@ diagramIdDisabled: false, dataForm: { id: null, + pid: null, + model_tag: '', + model_name: '', + product_id: null, content: null, publishContent: null, hasPublish: 0, urlPref: '', + nodeArr: [] }, type: '', id: '', @@ -758,8 +1154,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 +1167,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 +1203,6 @@ } }, }, - // panning: { - // enabled: true, - // }, scroller: { enabled: true, pageVisible: true, @@ -828,9 +1223,6 @@ connecting: { router: { name: 'manhattan', - // args: { - // padding: 1, - // }, }, connector: { name: 'rounded', @@ -997,9 +1389,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 +1402,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: '', @@ -1157,24 +1553,18 @@ } } 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}) => { @@ -1422,6 +1812,16 @@ }, 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') @@ -1435,6 +1835,15 @@ }, 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 => { -- Gitblit v1.9.1