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/RBD-edit-img.vue | 3418 +++++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 2,362 insertions(+), 1,056 deletions(-)
diff --git a/web/src/views/modules/taskReliability/RBD-edit-img.vue b/web/src/views/modules/taskReliability/RBD-edit-img.vue
index 1beb7ca..a83d7e4 100644
--- a/web/src/views/modules/taskReliability/RBD-edit-img.vue
+++ b/web/src/views/modules/taskReliability/RBD-edit-img.vue
@@ -16,8 +16,12 @@
</el-form-item>
<el-form-item>
<el-button type="primary" @click="saveDiagram()">鏆傚瓨</el-button>
- <el-button type="primary" @click="analyzeDiagram()">淇濆瓨</el-button>
+ <el-button type="primary" @click="analyzeDiagram()">鎻愪氦</el-button>
<el-button type="primary" @click="clearDiagram()">娓呯┖鍥惧舰</el-button>
+ <el-checkbox style="margin: 0 10px 0 10px" v-model="dataForm.autoLayout" :true-label="1" :false-label="0">
+ 鏄惁寮�鍚竴閿帓鐗�
+ </el-checkbox>
+ <el-button type="primary" @click="layoutDiagram()" :disabled="!dataForm.autoLayout">涓�閿帓鐗�</el-button>
<el-button @click="leftAlign()">
<i style="font-size: 1rem;" class="wt-iconfont icon-zuoduiqi"></i>
</el-button>
@@ -37,16 +41,19 @@
<i style="font-size: 1rem;" class="wt-iconfont icon-diduiqi"></i>
</el-button>
</el-form-item>
+ <el-form-item>
+ <el-button @click="undo()">鎾ら攢</el-button>
+ <el-button @click="redo()">閲嶅仛</el-button>
+ </el-form-item>
+ <el-form-item>
+ <zt-button type="delete" @click="deleteCompment()"/>
+ </el-form-item>
</el-form>
<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>
@@ -54,494 +61,941 @@
</template>
<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 {setHartBeat} from '@/commonJS/common';
-import Cookies from 'js-cookie'
+ import {Graph, Shape, Addon, Cell} from '@antv/x6'
+ 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 Mousetrap from 'mousetrap'
+ // var Mousetrap = require('mousetrap');
+ // import RBDDefault from './RBD-default.json'
-export default {
- name: 'RBD-edit-img',
- /*props: {
-
- },*/
- props: {
- projectId: {
- type: String
- },
- diagarmId: {
- type: String
- },
- pageCode: {
- default: 'wlt_pz'
- },
- flowCode: {
- type: String,
- default: 'wltFlow'
- },
- },
- components: {
- ConfigNode,
- ConfigEdge
- },
- data() {
- return {
- nodeAdded: false,
- connectNode: {},
- modelId: '',
- modelName: '',
- modelType: '',
- timer: null,
- imgsList: [
- {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: 'switch',
- imgName: 'switch',
- nodeType: 'switch',
- imgWidth: 60,
- imgHeight: 60,
- imgId: '5',
- data: {}
- },
- {imgPath: 'vote', imgName: 'vote', nodeType: 'vote', imgWidth: 60, imgHeight: 60, imgId: '6', data: {}},
- ],
- imgsList2: [
- // {imgPath:'logo',imgName:'logo',nodeType:'node',,nodeTypeExt:'',productType:'',statusImg:'',imgWidth:60,imgHeight:60,imgId:'100',dataId:'123456'},
- ],
- combiningImages: [
- {
- imgPath: 'switch',
- imgName: 'switch',
- nodeType: 'switch',
- imgWidth: 60,
- imgHeight: 60,
- imgId: '5',
- data: {}
- },
- {imgPath: 'vote', imgName: 'vote', nodeType: 'vote', imgWidth: 60, imgHeight: 60, imgId: '6', data: {}}
- ],
- nodeType: '',
- first: true,
- shape: '',
- projectList: [],
- diagramList: [],
- diagramId: '',
- projectId: '',
- diagramJson: '',
- diagramIdDisabled: false,
- dataForm: {
- id: null,
- content: null,
- publishContent: null,
- hasPublish: 0,
- urlPref: '',
+ export default {
+ name: 'RBD-edit-img',
+ props: {
+ projectId: {
+ type: String
},
- // emptyJson: {
- // // 鑺傜偣
- // nodes: [
- // {
- // id: 'node1', // String锛屽彲閫夛紝鑺傜偣鐨勫敮涓�鏍囪瘑
- // width: 500, // Number锛屽彲閫夛紝鑺傜偣澶у皬鐨� width 鍊�
- // height: 300, // Number锛屽彲閫夛紝鑺傜偣澶у皬鐨� height 鍊�
- // label: '璇ラ」鐩繕鏈厤缃巶瀹剁綉缁滃浘',
- // attrs: {
- // body: {
- // strokeWidth: 0
- // },
- // }
- // // text: {
- // // text: '璇ラ」鐩繕鏈紪鍒剁綉缁滃浘',
- // // // fontSize: 56,
- // // fill: 'rgba(0,0,0,0.7)'
- // // },
- // // },
- // }
- // ],
- // },
- 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,
+ diagarmId: {
+ type: String
},
- 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',
- },
+ pageCode: {
+ default: 'wlt_pz'
+ },
+ flowCode: {
+ type: String,
+ default: 'wltFlow'
+ },
+ },
+ components: {
+ 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
},
- },
- },
- right: {
- position: {name: 'right'},
- attrs: {
- circle: {
- r: 4,
- magnet: true,
- stroke: '#5F95FF',
- strokeWidth: 1,
- fill: '#fff',
- style: {
- visibility: 'hidden',
- },
+ "size": {
+ "width": 60,
+ "height": 40
},
- },
- },
- bottom: {
- position: {name: 'bottom'},
- attrs: {
- circle: {
- r: 4,
- magnet: true,
- stroke: '#5F95FF',
- strokeWidth: 1,
- fill: '#fff',
- style: {
- visibility: 'hidden',
+ "attrs": {
+ "text": {
+ "refY": "100%",
+ "textVerticalAnchor": "top",
+ "text": "",
+ "refY2": 4
},
+ "image": {
+ "xlink:href": "${url}10011"
+ }
},
- },
- },
- left: {
- position: {name: 'left'},
- attrs: {
- circle: {
- r: 4,
- magnet: true,
- stroke: '#5F95FF',
- strokeWidth: 1,
- fill: '#fff',
- style: {
- visibility: 'hidden',
+ "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
},
- },
- },
- items: [
+ {
+ "position": {
+ "x": 0,
+ "y": 0
+ },
+ "size": {
+ "width": 60,
+ "height": 40
+ },
+ "attrs": {
+ "text": {
+ "refY": "100%",
+ "textVerticalAnchor": "top",
+ "text": "",
+ "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",
+
+ "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": "",
+ "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",
+ "args": {
+ "startDirections": ["right"],
+ "endDirections": ["left"]
+ }
+ },
+ "connector": {
+ "name": "rounded"
+ },
+ "source": {
+ "cell": "10000"
+ },
+ "target": {
+ "cell": 15000
+ },
+ "zIndex": -1
+ },
+ {
+ "shape": "edge",
+ "id": "a0f3cf90-6d37-4ee0-a254-90b4ec2b6a7f",
+ "router": {
+ "name": "manhattan",
+ "args": {
+ "startDirections": ["right"],
+ "endDirections": ["left"]
+ }
+ },
+ "connector": {
+ "name": "rounded"
+ },
+ "source": {
+ "cell": 15000
+ },
+ "target": {
+ "cell": "20000"
+ },
+ "zIndex": -1
+ }
+ ]
+ }
+ `
+ return JSON.parse(result)
+ }
+ },
+ data() {
+ return {
+ canAdd: true,
+ nodeX: '',
+ nodeY: '',
+ isFirstLoad: true,
+ hasMoveNode: false,
+ hasMoveSingleNode: null,
+ nodeAdded: false,
+ connectNode: {},
+ modelId: '',
+ modelName: '',
+ modelType: '',
+ timer: null,
+ imagesList: [
{
- id: 'top1',
- group: 'top',
+ imgPath: 'switch',
+ imgName: '',
+ nodeType: 'switch',
+ imgWidth: 50,
+ imgHeight: 50,
+ imgId: '9',
+ data: {}
+ },
+ {imgPath: 'vote', imgName: '', nodeType: 'vote', imgWidth: 50, imgHeight: 50, imgId: '6', data: {}},
+ {
+ imgPath: 'parallel',
+ imgName: '',
+ nodeType: 'parallel',
+ imgWidth: 50,
+ imgHeight: 50,
+ imgId: '5',
+ data: {}
},
{
- id: 'right1',
- group: 'right',
- },
- {
- id: 'bottom1',
- group: 'bottom',
- },
- {
- id: 'left1',
- group: 'left',
+ imgPath: 'bridgeConnection',
+ imgName: '',
+ nodeType: 'bridgeConnection',
+ imgWidth: 50,
+ imgHeight: 50,
+ imgId: '10',
+ data: {}
},
],
- }
- }
- },
- watch: {
- '$route.params.configId'() {
- // alert('$route.params.projectId change')
- this.projectId = this.$route.params.projectId
- //this.diagramId = this.$route.params.diagramId
- console.log(this.$route.params.projectId, 'this.$route.params.projectId')
- console.log(this.$route.params.diagramId, 'this.$route.params.diagramId')
- }
- },
- mounted() {
- //this.initDigram()
- this.type = 'grid'
- },
- methods: {
- init(row) {
- this.modelName = row.modelName
- this.dataForm.id = row.id
- // this.productId = row.productId
- // this.getProduct(row.productId)
- this.initDigram(row.productId)
- console.log(this.dataForm, 'init(row){')
- },
- async getDiagram(modelId) {
- let params = {
- modelId: modelId,
- urlPref: window.SITE_CONFIG['apiURL'],
- token: Cookies.get('token'),
- }
- let res = await this.$http.get(`/taskReliability/ModelLine/getDiagram`, {params: params})
- console.log(res, 'async getDiagram( res')
- if (res.data !== null && (res.data.content != null)) {
- this.dataForm = res.data
- console.log(this.dataForm, 'this.dataForm in getDiagram')
- if (this.dataForm.content != '') {
- this.diagramJson = JSON.parse(this.dataForm.content)
- }
- // console.log(this.dataForm.content,'this.Diagram content')
- console.log(this.diagramJson, 'this.Diagram json')
- this.graph.fromJSON(this.diagramJson)
- this.graph.positionContent('left')
- // this.graph.centerContent()
- // this.graph.zoomToFit()
- } else {
- await this.clearDiagram()
- }
- },
- async clearDiagram() {
- this.dataForm.id = null
- // this.graph.fromJSON(this.emptyJson)
- this.graph.fromJSON('')
- // this.graph.centerContent()
- // this.graph.zoomToFit()
- // this.graph.freeze()
- },
- async initDigram(productId) {
- 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'),
- width: document.documentElement.clientWidth,
- height: document.documentElement.clientHeight - 200,
- // async: true,
- grid: {
- visible: true,
+ 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: [],
+ autoLayout: 1,
},
- autoResize: true,
- history: {
- enabled: true,
- beforeAddCommand(event, args) {
- if (args.key === 'tools') {
- console.log(args.key, 'event, args')
- return false
- }
- },
- },
- // panning: {
- // enabled: true,
- // },
- 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: {
+ type: '',
+ id: '',
+ graph: null,
+ globalGridAttr: {
+ productType: '',
+ voteNum: '',
+ repairMttcr: '',
+ repairMttcrOtherParams2: '',
+ repairMttcrOtherParams3: '',
+ repairDistribType: '',
+ reliabDistribType: '',
+ taskMtbcfOtherParams2: '',
+ taskMtbcfOtherParams3: '',
+ 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: {
name: 'manhattan',
- // args: {
- // padding: 1,
- // },
- },
- connector: {
- name: 'rounded',
args: {
- radius: 5,
+ startDirections: ['top', 'bottom'], // 浠庝笅鏂瑰紑濮�
+ endDirections: ['left'], // 鍚戝乏鏂圭粨鏉�
},
},
- anchor: 'center',
- connectionPoint: 'anchor',
- allowBlank: false,
- snap: {
- radius: 20,
- },
- createEdge() {
- return new Shape.Edge({
+ 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: {
- line: {
- stroke: '#A2B1C3',
- strokeWidth: 2,
- targetMarker: 'classic'
- }
- },
- labels: [{
- attrs: {
- body: {
- stroke: '#5F95FF',
+ circle: {
+ r: 4,
+ magnet: true,
+ stroke: '#5F95FF',
+ strokeWidth: 1,
+ fill: '#fff',
+ style: {
+ visibility: 'hidden',
},
- text: {
- text: ''
+ },
+ },
+ },
+ 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: {
+ '$route.params.configId'() {
+ // alert('$route.params.projectId change')
+ this.projectId = this.$route.params.projectId
+ //this.diagramId = this.$route.params.diagramId
+ console.log(this.$route.params.projectId, 'this.$route.params.projectId')
+ console.log(this.$route.params.diagramId, 'this.$route.params.diagramId')
+ }
+ },
+ mounted() {
+ //this.initDigram()
+ this.type = 'grid'
+ },
+ methods: {
+ init(row) {
+ this.modelName = row.modelName
+ this.dataForm.id = row.id
+ // this.productId = row.productId
+ // this.getProduct(row.productId)
+ this.initDigram(row.productId)
+ console.log(this.dataForm, 'init(row){')
+ },
+ async getDiagram(modelId) {
+ this.isFirstLoad = true;
+ let params = {
+ modelId: modelId,
+ urlPref: window.SITE_CONFIG['apiURL'],
+ token: Cookies.get('token'),
+ }
+ let res = await this.$http.get(`/taskReliability/ModelLine/getDiagram`, {params: params})
+ this.dataForm = res.data
+ this.dataForm.autoLayout = parseInt(this.dataForm.autoLayout)
+ 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;
+ console.log(this.diagramJson.cells.length, 'this.diagramJson.cells.length')
+
+ this.graph.positionContent('left')
+ // this.graph.centerContent()
+ // this.graph.zoomToFit()
+ } else {
+ this.graph.fromJSON(this.RBDDefault)
+ this.isFirstLoad = false
+ }
+ },
+ async clearDiagram() {
+ // this.graph.fromJSON(this.emptyJson)
+ console.log(this.RBDDefault, 'clearDiagram')
+ this.graph.fromJSON(this.RBDDefault)
+ this.graph.positionContent('left')
+ this.isFirstLoad = false;
+ // this.graph.centerContent()
+ // this.graph.zoomToFit()
+ // this.graph.freeze()
+ },
+ async initDigram(productId) {
+ 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'),
+ width: document.documentElement.clientWidth,
+ height: document.documentElement.clientHeight - 200,
+ // async: true,
+ grid: {
+ visible: true,
+ },
+ autoResize: true,
+ history: {
+ 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',
+ args: {
+ startDirections: ['top', 'bottom'], // 浠庝笅鏂瑰紑濮�
+ endDirections: ['left'], // 鍚戝乏鏂圭粨鏉�
+ },
+ },
+ 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
}
},
- position: {
- distance: 0.5,
- angle: 180,
- options: {
- keepGradient: true,
- ensureLegibility: true
+ 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()
+ const stencil = new Addon.Stencil({
+ // getDragNode: (node) => {
+ // node.removeAttrs('title')
+ // },
+ getDropNode: (node) => {
+ this.canAdd = true
+ const {width, height} = node.size()
+ if (node.getData().type && node.getData().type === 'imageNodes2') {
+ const nodes = this.graph.getNodes()
+ let deviceNoArr = []
+
+ for (const node2 of nodes) {
+ console.log(node2, 'saveDiagram node')
+ if (node2.getData().nodeType == 'node' && node2.getData().dataId) {
+ if (node2.getData().dataId == node.getData().dataId) {
+ deviceNoArr.push(node2.getData().deviceNo)
}
}
- }],
- tools: {
- name: 'segments',
- args: {
- attrs: {fill: '#666'},
- },
- },
- zIndex: 0,
- })
- },
- 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()
- const stencil = new Addon.Stencil({
- getDragNode: (node) => node.clone({keepId: true}),
- getDropNode: (node) => {
- if (node.getData().type && node.getData().type === 'imageNodes2') {
- return node.clone({keepId: true})
- } else {
- return node.clone()
- }
- },
- validateNode: (node) => {
- const existingNodes = this.graph.getNodes(); // 鑾峰彇鐢诲竷涓婃墍鏈夎妭鐐�
- for (const existingNode of existingNodes) {
- if (existingNode.id === node.id) {
- this.$message({message: '璇ヨ澶囪妭鐐瑰凡鍦ㄧ敾甯冧笂锛屾棤娉曞啀娆＄粯鍒�', type: 'warning'})
- return false; // 鍙栨秷娣诲姞鑺傜偣鎿嶄綔
+ }
+ let no = 0
+ console.log(node, 'node')
+ console.log(deviceNoArr, 'deviceNoArr')
+ for (let i = 1; i <= node.getData().basicUnitNum; i++) {
+ if (deviceNoArr.findIndex(item => item === i) === -1) {
+ no = i
+ if (node.getData().basicUnitNum >= 1) {
+ node.getData().deviceNo = i
+ if(node.getData().deviceNo > 1){
+ node.attr('text/text', node.attr('text/text') + '-' + i)
+ }
+ }
+ break
+ }
+ }
+ if (no === 0) {
+ this.canAdd = false
+ }
}
- }
- },
- title: '',
- target: this.graph,
- stencilGraphWidth: 200,
- stencilGraphHeight: 280,
- collapsable: true,
- groups: [
- {
- title: '杩愮畻绗﹀彿',
- name: 'group1',
+ return node.clone()
+
},
- {
- title: '缁勫悎鍥�',
- name: 'combiningImages',
- graphHeight: 100,
+ validateNode: (node) => {
+ if (!this.canAdd) {
+ this.$message({message: '璇ヨ澶囪妭鐐瑰凡鍦ㄧ敾甯冧笂锛屾棤娉曞啀娆＄粯鍒�', type: 'warning'})
+ return false
+ }
+
},
- {
- title: '璁惧鑺傜偣',
- name: 'group2',
- graphHeight: '',
- layoutOptions: {
- rowHeight: 90,
+ title: '',
+ target: this.graph,
+ stencilGraphWidth: 240,
+ stencilGraphHeight: 280,
+ collapsable: true,
+ groups: [
+ {
+ title: '杩愮畻绗﹀彿',
+ name: 'group1',
+ graphHeight: 200,
},
- }
- ],
- layoutOptions: {
- columns: 2,
- columnWidth: 105,
- },
- })
- document.getElementById('stencilImg').appendChild(stencil.container)
- const imageNodes = this.imgsList.map((item) =>
+ {
+ title: '璁惧鑺傜偣',
+ name: 'group2',
+ graphHeight: '',
+ layoutOptions: {
+ rowHeight: 100,
+ },
+ }
+ ],
+ layoutOptions: {
+ columns: 2,
+ columnWidth: 130,
+ },
+ })
+ document.getElementById('stencilImg').appendChild(stencil.container)
+ const imageNodes = this.imagesList.map((item) =>
this.graph.createNode({
shape: 'image',
// imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
width: item.imgWidth,
height: item.imgHeight,
+ id: item.imgId,
data: {
type: 'imageNodes',
dataId: '',
+ startNodeId: '',
+ endNodeId: '20000',
nodeType: item.nodeType,
nodeTypeExt: '',
voteNum: ''
@@ -565,664 +1019,1516 @@
},
ports: {...this.ports},
}),
- )
- const combiningImages = this.combiningImages.map((item) =>
+ )
+ let params = {
+ productId: productId
+ }
+ let res = await this.$http.get(`/basicInfo/XhProductModel/getProduct`, {params: params})
+ this.imagesList2 = res.data
+ /*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',
- // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
- width: item.imgWidth,
- height: item.imgHeight,
- data: {
- type: 'imageNodes',
- dataId: '',
- nodeType: item.nodeType,
- nodeTypeExt: '',
- voteNum: ''
- },
- attrs: {
- image: {
- 'xlink:href': '/modelImg/' + item.imgPath + '.svg',
- },
- text: {
- text: item.imgName,
- fontSize: 14,
- style: {
- color: this.globalGridAttr.nodeColor
- },
- refX: 0.5,
- refY: '100%',
- refY2: 4,
- textAnchor: 'middle',
- textVerticalAnchor: 'top',
- },
- },
- ports: {...this.ports},
- }),
- )
- let params = {
- productId: productId
- }
- let res = await this.$http.get(`/basicInfo/XhProductModel/getProduct`, {params: params})
- this.imgsList2 = res.data
- console.log(this.imgsList2, 'getProduct(productId)234567890')
- const imageNodes2 = this.imgsList2.map((item) =>
- this.graph.createNode({
- shape: 'image',
- imageUrl: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=${item.imgPath}`,
+ //imageUrl: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=${item.imgPath}`,
width: 60,
- height: 60,
- id: item.dataId, // 鎵嬪姩璁剧疆鑺傜偣鐨� ID
+ height: 70,
+ //id: item.dataId, // 鎵嬪姩璁剧疆鑺傜偣鐨� ID
data: {
type: 'imageNodes2',
- isRepair: item.isRepair,
dataId: item.dataId,
+ basicUnitNum: item.basicUnitNum,
+ deviceNo: 1,
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,
+ taskMtbcfOther2: item.taskMtbcfOtherParams2,
+ taskMtbcfOther3: item.taskMtbcfOtherParams3,
+
+ isRepair: item.isRepair,
+ repairDistribType: item.repairDistribType ? item.repairDistribType : 1,
+ repairMttcr: item.repairMttcr,
+ repairMttcrOther2: item.repairMttcrOtherParams2,
+ repairMttcrOther3: item.repairMttcrOtherParams3,
+ successRate: item.successRate,
+
imgHeight: item.imgHeight,
imgWidth: item.imgWidth,
voteNum: '',
},
attrs: {
+ image: {
+ 'xlink:href': `${window.SITE_CONFIG['apiURL']}/basicInfo/XhProductModel/getImg?token=${Cookies.get('token')}&id=${item.dataId}&t=${new Date().getTime()}`,
+ //'xlink:href': urlObject.createObjectURL(new Blob([item.svgContent])),
+ },
+ title: {
+ text: item.basicUnitNum > 1 ? item.basicUnitNum : '',
+ refX: 15,
+ refY: 10,
+ fill: '#748be7',
+ fontSize: 14,
+ fontWeight: 'bold',
+ 'text-anchor': 'start',
+ },
text: {
text: item.imgName,
fontSize: 14,
- style: {
- color: this.globalGridAttr.nodeColor
- },
refX: 0.5,
- refY: '100%',
+ refY: '85%',
refY2: 4,
textAnchor: 'middle',
textVerticalAnchor: 'top',
+ textWrap: {
+ width: 120, // 瀹藉害涓� 120px鎹㈣
+ ellipsis: false, // 鏂囨湰瓒呭嚭鏄剧ず鑼冨洿鏃讹紝鑷姩娣诲姞鐪佺暐鍙�
+ breakWord: true, // 鏄惁鎴柇鍗曡瘝
+ }
},
},
- tools: [
+ markup: [
{
- name: 'button',
- args: {
- markup: [
- {
- tagName: 'image',
- selector: 'icon',
- attrs: {
- // 'xlink:href': 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ',
- 'xlink:href': item.statusImg,
- width: 30,
- height: 30,
- x: 0,
- y: 0
- }
- }
- ]
- }
- }
+ tagName: 'image',
+ selector: 'image',
+ },
+ {
+ tagName: 'text',
+ selector: 'title',
+ },
+ {
+ tagName: 'text',
+ selector: 'text',
+ },
],
+ // tools: [
+ // {
+ // name: 'button',
+ // args: {
+ // markup: [
+ // {
+ // tagName: 'image',
+ // selector: 'icon',
+ // attrs: {
+ // 'xlink:href': 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*evDjT5vjkX0AAAAAAAAAAAAAARQnAQ',
+ // // 'xlink:href': item.statusImg,
+ // width: 30,
+ // height: 30,
+ // x: 0,
+ // y: 0
+ // }
+ // }
+ // ]
+ // }
+ // }
+ // ],
ports: {...this.ports},
}),
- )
- stencil.load(imageNodes, 'group1')
- stencil.load(imageNodes2, 'group2')
- stencil.load(combiningImages, 'combiningImages')
+ )
+ stencil.load(imageNodes, 'group1')
+ stencil.load(imageNodes2, 'group2')
- this.graph.bindKey(['meta+c', 'ctrl+c'], () => {
- const cells = this.graph.getSelectedCells()
- if (cells.length) {
- this.graph.copy(cells)
- }
- return false
- })
+// konami code!
+ // 鍗曞嚮node鑺傜偣
+ // this.graph.on('node:click', ({ e, x, y, node, view}) => {
+ // Mousetrap.bind('up', function(e) {
+ // e.preventDefault();
+ // node.getBBox().x
+ // node.getBBox().y
+ // setTimeout(()=>{
+ // node.position(node.getBBox().x,node.getBBox().y -0.5)
+ // console.log(x,y,'鎸変笅浜嗏啈閿� up');
+ // },100)
+ // })
+ // Mousetrap.bind('down', function(e) {
+ // e.preventDefault();
+ // setTimeout(()=>{
+ // node.position(node.getBBox().x,node.getBBox().y+0.5)
+ // console.log(x,y,'鎸変笅浜嗏啌閿� down');
+ // },100)
+ //
+ // })
+ // Mousetrap.bind('left', function(e) {
+ // e.preventDefault();
+ // setTimeout(()=>{
+ // node.position(node.getBBox().x-0.5,node.getBBox().y)
+ // console.log(x,y,'鎸変笅浜嗏啇閿� left');
+ // },100)
+ //
+ // })
+ // Mousetrap.bind('right', function(e) {
+ // e.preventDefault();
+ // setTimeout(()=>{
+ // node.position(node.getBBox().x+0.5,node.getBBox().y)
+ // console.log(x,y,'鎸変笅浜嗏啋閿� right');
+ // },100)
+ // })
+ // })
+ 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
- })
-//undo redo
- this.graph.bindKey(['meta+z', 'ctrl+z'], () => {
- if (this.graph.history.canUndo()) {
- this.graph.history.undo()
- }
- return false
- })
-
- this.graph.bindKey(['meta+shift+z', 'ctrl+shift+z'], () => {
- if (this.graph.history.canRedo()) {
- this.graph.history.redo()
- }
- 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)
- }
- })
+ this.graph.bindKey(['meta+a', 'ctrl+a'], () => {
+ const nodes = this.graph.getNodes()
+ if (nodes) {
+ this.graph.select(nodes)
+ }
+ })
//delete
- this.graph.bindKey('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.reset()
+ // this.type.value = "grid"
+ this.type = 'grid'
+ // this.id = cell.id
+ })
+ // 鐩戝惉鑺傜偣娣诲姞浜嬩欢
+ this.graph.on('node:added', ({node}) => {
+ node.setAttrs({
+ title: {text: ''},
+ })
+ if (this.isFirstLoad) {
+ return
+ }
+ if (node.getData().isSelfCreated) {
+ return
+ }
+ const nodeType = node.getData().nodeType; // 鑾峰彇鑺傜偣鐨勭被鍨�
+ const nodeObj = node
+ console.log(node.id, 'node.id')
+ 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.reset()
+ // edge.attr('line/stroke', 'orange')
+ // edge.prop('labels/0', {
+ // attrs: {
+ // body: {
+ // stroke: 'orange',
+ // },
+ // },
+ //
+ // })
+ })
+
+ // 鎺у埗杩炴帴妗╂樉绀�/闅愯棌
+ 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()
+ // })
+
+ await this.getDiagram(this.dataForm.id)
+ },
+ // showPorts(ports, show) {
+ // for (let i = 0, len = ports.length; i < len; i = i + 1) {
+ // ports[i].style.visibility = show ? 'visible' : 'hidden'
+ // }
+ // },
+ reset() {
+ this.graph.drawBackground({color: '#fff'})
+ const nodes = this.graph.getNodes()
+ const edges = this.graph.getEdges()
+ nodes.forEach((node) => {
+ node.attr('body/stroke', '#5F95FF')
+ })
+ edges.forEach((edge) => {
+ edge.attr('line/stroke', '#5F95FF')
+ edge.prop('labels/0', {
+ attrs: {
+ body: {
+ stroke: '#5F95FF',
+ },
+ },
+ })
+ })
+ },
+ deleteCompment() {
const cells = this.graph.getSelectedCells()
- if (cells.length) {
- this.$confirm('鏄惁鍒犻櫎璇ヨ妭鐐�?', '鎻愮ず', {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- type: 'warning'
- }).then(() => {
- this.$message({
- type: 'success',
- message: '鍒犻櫎鎴愬姛!'
+ console.log(cells, 'cells')
+ if (cells.length === 1) {
+ let node = cells[0]
+ if (!node.isNode()) {
+ this.$confirm('鏄惁鍒犻櫎璇ヨ繛鎺ョ嚎?', '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
+ }).then(() => {
+ node.remove()
+ this.$message({
+ type: 'success',
+ message: '鍒犻櫎鎴愬姛!'
+ })
+ }).catch(() => {
+ this.$message({
+ type: 'info',
+ message: '宸插彇娑堝垹闄�'
+ })
})
- this.graph.removeCells(cells)
- }).catch(() => {
- this.$message({
- type: 'info',
- message: '宸插彇娑堝垹闄�'
+ // this.$message({message: '璇烽�変腑鑺傜偣', type: 'warning'})
+ return false; // 鍙栨秷鎿嶄綔
+ }
+ let nodeType = node.getData().nodeType
+ let deleteType = 0
+ if (nodeType === 'node' || nodeType === 'dashedBox') {
+ deleteType = 1
+ } else if ('parallel,switch,vote,bridge'.indexOf(nodeType) > -1) {
+ deleteType = 2
+ }
+
+ let canDelete = false
+ if (nodeType === 'start' || nodeType === 'end') {
+ this.$message({message: '涓嶅厑璁稿垹闄よ捣濮嬪拰缁撴潫鑺傜偣', type: 'warning'})
+ return false; // 鍙栨秷鎿嶄綔
+ }
+ if (deleteType > 0) {
+ let startNode = null
+ if (deleteType === 1) {
+ startNode = node
+ } else if (deleteType === 2) {
+ startNode = this.graph.getCellById(node.getData().startNodeId)
+ }
+
+ let isSeriesNode = this.isSeriesNode(startNode, node)
+ let isMultipleBrach = this.isMultipleBrach(node)
+ if (isSeriesNode) {
+ //涓茶仈
+ let inLine = this.getInLinesOfNode(startNode)
+ let outLine = this.getOutLinesOfNode(node)
+ let inLineIsToLine = this.hasOtherLineToMyLine(inLine[0].id)
+ let inNode = isSeriesNode.inNode
+ let outNode = isSeriesNode.outNode
+ console.log(inLine, outLine, 'inLine,outLine')
+ console.log(inNode, outNode, 'inNode,outNode')
+ //鎻愮ず鏄惁瑕佸垹闄�
+ this.$confirm('鏄惁鍒犻櫎璇ヨ妭鐐�?', '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
+ }).then(() => {
+ if (inLineIsToLine) {
+ inLine[0].target = {cell: outNode.id, port: 'left1'}
+ } else {
+ outLine[0].source = {cell: inNode.id, port: 'right1'}
+ }
+ if (deleteType === 1) {
+ node.remove()
+ } else {
+ this.deleteCombination(node)
+ }
+ this.$message({
+ type: 'success',
+ message: '鍒犻櫎鎴愬姛!'
+ })
+ }).catch(() => {
+ this.$message({
+ type: 'info',
+ message: '宸插彇娑堝垹闄�'
+ })
+ return false
+ })
+ } else if (this.isMultipleBrach(node)) {
+ //鎻愮ず鏄惁瑕佸垹闄�
+ this.$confirm('鏄惁鍒犻櫎璇ヨ妭鐐�?', '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
+ }).then(() => {
+ /* if (inLineIsToLine) {
+ inLine[0].target = {cell: outNode.id, port: 'left1'}
+ } else {
+ outLine[0].source = {cell: inNode.id, port: 'right1'}
+ }*/
+ if (deleteType === 1)
+ node.remove()
+ else
+ this.deleteCombination(node)
+ this.$message({
+ type: 'success',
+ message: '鍒犻櫎鎴愬姛!'
+ })
+
+ }).catch(() => {
+ this.$message({
+ type: 'info',
+ message: '宸插彇娑堝垹闄�'
+ })
+ return false
+ })
+ } else {
+ //鎻愮ず涓嶈兘鍒犻櫎
+ this.$message({message: '璇ユ潯绾胯矾涓婂彧鏈夎鑺傜偣锛屾棤娉曞垹闄�', type: 'warning'})
+ return false; // 鍙栨秷鎿嶄綔
+ }
+ }
+ } else {
+ //鎻愮ず涓嶈兘鍒犻櫎
+ this.$message({message: '鍙兘閫変腑涓�涓妭鐐�', type: 'warning'})
+ return false; // 鍙栨秷鎿嶄綔
+ }
+ },
+ async search() {
+ await this.getDiagram();
+ },
+ async saveDiagram() {
+ console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
+ // 鑾峰彇鎵�鏈夊瓙鑺傜偣
+ this.getNodeArr()
+ 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: '纭畾'
})
+ }
+ })
+ },
+ 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) {
+ nodeArr2.push(node.getData().dataId)
+ }
+ }
+ this.dataForm.nodeArr = nodeArr2
+ },
+ async analyzeDiagram() {
+ console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
+ // 妫�鏌ラ櫎褰撳墠鑺傜偣涔嬪鐨勬墍鏈夎妭鐐圭殑鍖呭洿妗嗘槸鍚︾浉浜�
+ // 鑾峰彇鎵�鏈夊瓙鑺傜偣
+ this.getNodeArr()
+ const nodes = this.graph.getNodes()
+ for (const node of nodes) {
+ if (node.getData().nodeType === 'dashedBox') {
+ this.$message({message: '璇ユā鍨嬩腑瀛樺湪铏氭锛屾棤娉曟彁浜�', type: 'warning'})
+ return false;
+ }
+ if (node.getData().nodeType === 'vote') {
+ if (node.getData().voteNum === null || node.getData().voteNum === '') {
+ this.$message({message: '琛ㄥ喅鑺傜偣鐨勮〃鍐虫暟閲忔湭璁剧疆', type: 'warning'})
+ return false;
+ }
+ const edges = this.graph.getIncomingEdges(node);
+ if (node.getData().voteNum >= edges.length) {
+ this.$message({message: '琛ㄥ喅鑺傜偣鐨勮〃鍐虫暟閲忓繀椤诲皬浜庤鑺傜偣鐨勮繘绾挎暟閲�', type: 'warning'})
+ return false;
+ }
+ }
+ if (node.getData().nodeType === 'switch') {
+ if (node.getData().voteNum === null || node.getData().voteNum === '') {
+ this.$message({message: '鏃佽仈鑺傜偣鐨勫浠芥暟閲忔湭璁剧疆', type: 'warning'})
+ return false;
+ }
+ const edges = this.graph.getIncomingEdges(node);
+ if (node.getData().voteNum >= edges.length) {
+ this.$message({message: '鏃佽仈鑺傜偣鐨勫浠芥暟閲忓繀椤诲皬浜庤鑺傜偣鐨勮繘绾挎暟閲�', type: 'warning'})
+ return false;
+ }
+ }
+ }
+ 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('鎻愪氦鎴愬姛', '鎻愮ず', {
+ confirmButtonText: '纭畾'
+ })
+ }
+ })
+ },
+ async layoutDiagram() {
+ if (this.dataForm.autoLayout == 1) {
+ console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
+ this.dataForm.content = JSON.stringify(this.graph.toJSON())
+ this.dataForm.urlPref = window.SITE_CONFIG['apiURL']
+ await this.$http['post'](`/taskReliability/ModelLine/layout`, this.dataForm).then(async res => {
+ if (res.msg === 'success') {
+ // this.$emit('refreshDataList')
+ // this.$alert('瑙ｆ瀽鎴愬姛', '鎻愮ず', {
+ // confirmButtonText: '纭畾'
+ // })
+ console.log(res.data, 'layoutDiagram res.data')
+ this.dataForm.content = res.data.content
+ console.log(this.dataForm.content, 'layoutDiagram dataForm.content')
+ 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')
+ }
})
}
- })
-// zoom
- this.graph.bindKey(['ctrl+1', 'meta+1'], () => {
- const zoom = this.graph.zoom()
- if (zoom < 1.5) {
- this.graph.zoom(0.1)
+ },
+ leftAlign() {
+ const NODE = this.graph.getSelectedCells()
+ let leftX = null
+ for (let a of NODE) {
+ if (leftX == null || a.getBBox().x < leftX) {
+ leftX = a.getBBox().x
+ }
}
- })
-
- this.graph.bindKey(['ctrl+2', 'meta+2'], () => {
- const zoom = this.graph.zoom()
- if (zoom > 0.5) {
- this.graph.zoom(-0.1)
+ for (let a of NODE) {
+ let y = a.getBBox().y
+ a.position(leftX, y)
+ // console.log(leftX, ':', y, ' x:y')
}
- })
+ },
+ topAlign() {
+ const NODE = this.graph.getSelectedCells()
+ let topY = null
+ for (let a of NODE) {
+ console.log(a.getBBox(), 'a.getBBox()')
+ if (topY == null || a.getBBox().y < topY) {
+ topY = a.getBBox().y
+ }
+ }
+ for (let a of NODE) {
+ let x = a.getBBox().x
+ a.position(x, topY)
+ }
+ },
+ centerAlign() {
+ const NODE = this.graph.getSelectedCells()
+ let rightX = null
+ let leftX = null
+ for (let a of NODE) {
+ if (leftX == null || a.getBBox().x < leftX) {
+ leftX = a.getBBox().x
+ }
+ }
+ for (let a of NODE) {
+ if (rightX == null || a.getBBox().x + a.getBBox().width > rightX) {
+ rightX = a.getBBox().x + a.getBBox().width
+ }
+ }
- this.graph.on('blank:click', ({cell}) => {
- this.reset()
- // this.type.value = "grid"
- this.type = 'grid'
- // this.id = cell.id
- })
- // 鐩戝惉鑺傜偣娣诲姞浜嬩欢
- this.graph.on('node:added', ({node}) => {
- const nodeId = node.id; // 鑾峰彇鑺傜偣鐨勫敮涓� ID
- const nodeObj = node
- const intersectNodes = [];
+ let centerX = leftX + (rightX - leftX) / 2
+
+ for (let a of NODE) {
+ let y = a.getBBox().y
+ a.position(centerX - a.getBBox().width / 2, y)
+ }
+ },
+ shuipingAlign() {
+ const NODE = this.graph.getSelectedCells()
+ let bottomY = null
+ let topY = null
+ for (let a of NODE) {
+ if (topY == null || a.getBBox().y || 0 < topY) {
+ topY = a.getBBox().y
+ }
+ }
+ for (let a of NODE) {
+ if (bottomY == null || a.getBBox().y + a.getBBox().height > bottomY) {
+ bottomY = a.getBBox().y + a.getBBox().height
+ }
+ }
+
+ let centerY = topY + (bottomY - topY) / 2
+ for (let a of NODE) {
+ let x = a.getBBox().x
+ let centerHei = a.getBBox().height / 2
+ a.position(x, centerY - centerHei)
+ }
+ },
+ rightAlign() {
+ const NODE = this.graph.getSelectedCells()
+ let rightX = null
+ for (let a of NODE) {
+ if (rightX == null || a.getBBox().x + a.getBBox().width > rightX) {
+ rightX = a.getBBox().x + a.getBBox().width
+ }
+ }
+ for (let a of NODE) {
+ let y = a.getBBox().y
+ a.position(rightX - a.getBBox().width, y)
+ }
+ },
+ bottomAlign() {
+ const NODE = this.graph.getSelectedCells()
+ let bottomY = null
+ for (let a of NODE) {
+ if (bottomY == null || (a.getBBox().y + a.getBBox().height) > bottomY) {
+ bottomY = a.getBBox().y + a.getBBox().height
+ }
+ }
+
+ for (let a of NODE) {
+ let x = a.getBBox().x
+ a.position(x, bottomY - a.getBBox().height)
+ }
+ },
+ close() {
+ if (this.timer) {
+ window.clearInterval(this.timer)
+ }
+ },
+ // 瀹氫箟鍑芥暟鏉ユ鏌ヤ袱涓寘鍥存鏄惁鐩镐氦
+ findIntersectsNode(node) {
+ const nodes = this.graph.getNodes()
+ let intersectNodes = []
+ const bbox1 = node.getBBox();
// 妫�鏌ラ櫎褰撳墠鑺傜偣涔嬪鐨勬墍鏈夎妭鐐圭殑鍖呭洿妗嗘槸鍚︾浉浜�
- for (const otherNode of this.graph.getNodes()) {
+ for (const otherNode of nodes) {
if (otherNode === node) continue;
- const bbox1 = node.getBBox();
- const bbox2 = otherNode.getBBox();
- if (this.isIntersect(bbox1, bbox2)) {
+ let nodeType = otherNode.getData().nodeType
+ if (nodeType === "parallel" || nodeType === "switch" || nodeType === "vote" || nodeType === "dashedBox") {
+ const bbox2 = otherNode.getBBox();
+ if (bbox1.x < bbox2.x + bbox2.width &&
+ bbox1.x + bbox1.width > bbox2.x &&
+ bbox1.y < bbox2.y + bbox2.height &&
+ bbox1.y + bbox1.height > bbox2.y) {
+ intersectNodes.push(otherNode);
+ }
+ }
+ }
+ if (intersectNodes.length === 1) {
+ //console.log('Intersecting nodes:', intersectNodes.map(n => n)); // 鐩镐氦鑺傜偣鐨勫璞�
+ return intersectNodes[0]
+ } else {
+ //鎻愮ず鐢ㄦ埛鍙兘鎷栧埌涓�涓湁鏁堢殑鑺傜偣涓�
+ return null
+ }
+ },
+ // 鐩镐氦鐨勮妭鐐�
+ addBranch(graphNode, dragNode) { // graphCell鏄敾甯冧笂鍘熸湁鐨勮妭鐐广�俤ragNode鏄綋鍓嶆嫋鎷界殑鑺傜偣
+ let graphNodeType = graphNode.getData().nodeType
+
+ let dragNodeType = dragNode.getData().nodeType
+ let offHeight = 50
+ if (dragNodeType === 'node') {
+ offHeight = 70
+ } else if (dragNodeType === 'bridgeConnection') {
+ offHeight = 175
+ } else {
+ offHeight = 70
+ }
+ let centerX = 0, centerY = 0;
+
+ if (graphNodeType === 'dashedBox') { //铏氭
+ const edges = this.graph.getConnectedEdges(graphNode); // 鑾峰彇鐢诲竷涓婂師鏈夌殑鑺傜偣鎵�鏈夎繘鏉ョ殑绾�
+ let inEdges = edges.filter(edge => edge.target.cell === graphNode.id)
+ let startNode = null
+ let endNode = null
+ if (inEdges.length === 1) {
+ let startNodeId = inEdges[0].source.cell
+ startNode = this.graph.getCellById(startNodeId)
+ }
+ let outEdges = edges.filter(edge => edge.source.cell === graphNode.id)
+ if (outEdges.length === 1) {
+ let endNodeId = outEdges[0].target.cell
+ endNode = this.graph.getCellById(endNodeId)
+ }
+ if (startNode && endNode) {
+ centerX = graphNode.position().x + graphNode.getBBox().width / 2
+ centerY = graphNode.position().y + graphNode.getBBox().height / 2
+ let result = this.addNodeAndConnect(graphNode, dragNode, centerX, centerY)
+
+ let startPort = 'right1'
+ let endPort = 'left1'
+ if ((inEdges[0].target.port == 'top1' || outEdges[0].source.port == 'bottom1') && ('parallel,switch,vote,bridge'.indexOf(dragNodeType)) == -1) {
+ startPort = 'bottom1'
+ endPort = 'top1'
+ }
+
+ inEdges[0].target = {cell: result.newStartNode.id}
+ outEdges[0].source = {cell: result.newEndNode.id}
+ graphNode.remove()
+ if (this.dataForm.autoLayout == 1) {
+ if (!result.canPlace) {
+ //璋冪敤鑷姩鎺掔増
+ this.layoutDiagram()
+ }
+ }
+ }
+ } else { //骞惰缁撴瀯
+ const graphNodeStartNodeId = graphNode.getData().startNodeId // 鑾峰彇鐢诲竷涓婂師鏈夎妭鐐圭殑寮�濮婭D
+ const graphNodeStartNode = this.graph.getCellById(graphNodeStartNodeId) // 閫氳繃寮�濮婭D寰楀埌鍒濆鑺傜偣瀵硅薄
+ let graphNodeY = graphNode.position().y - graphNode.getBBox().height / 2 // 鑾峰彇鐢诲竷鍘熸湁鑺傜偣鐨剏鍧愭爣
+ let minY = graphNode.position().y
+ let maxY = graphNode.position().y + graphNode.getBBox().height
+
+ const edges = this.graph.getConnectedEdges(graphNode); // 鑾峰彇鐢诲竷涓婂師鏈夌殑鑺傜偣鎵�鏈夎繘鏉ョ殑绾�
+ // 鑾峰彇杩炴帴绾跨殑璺緞鏁版嵁
+ let inEdges = edges.filter(edge => edge.target.cell === graphNode.id)
+ //閬嶅巻杩欎釜缁勫悎閲岄潰鎵�鏈夎妭鐐癸紝 淇敼minY锛宮axY
+ let pointXY = {minY: minY, maxY: maxY}
+ console.log(pointXY, 'old')
+ this.getYRange(inEdges, graphNodeStartNode, pointXY)
+ console.log(pointXY, 'new')
+
+ let minX = graphNodeStartNode.position().x + graphNode.getBBox().width
+ let maxX = graphNode.position().x - dragNode.getBBox().width / 2
+ let centerX = minX + (maxX - minX) / 2
+ let centerY = graphNodeY + graphNode.getBBox().height / 2 - pointXY.minY > pointXY.maxY - (graphNodeY + graphNode.getBBox().height / 2) ?
+ pointXY.maxY + offHeight / 2 + 30 : pointXY.minY - offHeight / 2 - 30
+
+ let result = this.addNodeAndConnect(null, dragNode, centerX, centerY)
+ console.log(result, 'result111')
+ this.graph.addEdge({
+ source: {cell: graphNodeStartNode},
+ target: {cell: result.newStartNode},
+ router: {
+ name: 'manhattan',
+ args: {
+ startDirections: ['top', 'bottom'], // 浠庝笅鏂瑰紑濮�
+ endDirections: ['left'], // 鍚戝乏鏂圭粨鏉�
+ },
+ },
+ connector: {name: 'rounded'},
+ zIndex: -1
+ })
+ this.graph.addEdge({
+ source: {cell: result.newEndNode},
+ target: {cell: graphNode},
+ router: {
+ name: 'manhattan',
+ args: {
+ startDirections: ['right'], // 浠庝笅鏂瑰紑濮�
+ endDirections: ['top', 'bottom'], // 鍚戝乏鏂圭粨鏉�
+ },
+ },
+ connector: {name: 'rounded'},
+ zIndex: -1
+ })
+ if (this.dataForm.autoLayout == 1) {
+ if (!result.canPlace) {
+ //璋冪敤鑷姩鎺掔増
+ this.layoutDiagram()
+ }
+ }
+ }
+ },
+ addNodeAndConnect(targetNode, dragNode, centerX, centerY) { // graphCell鏄敾甯冧笂鍘熸湁鐨勮妭鐐广�俤ragNode鏄綋鍓嶆嫋鎷界殑鑺傜偣
+ let width = 100,
+ height = 80,
+ leftTopX = centerX,
+ leftTopY = centerY
+ let dragNodeType = dragNode.getData().nodeType
+ if (dragNodeType === 'node') {
+ width = 100
+ height = 70
+ } else if (dragNodeType === 'dashedBox') {
+ width = 60
+ height = 40
+ } else if (dragNodeType === 'bridgeConnection') {
+ width = 550
+ height = 175
+ } else {
+ width = 270
+ height = 70
+ }
+ leftTopX = centerX - width / 2
+ leftTopY = centerY - height / 2
+ let canPlace = true;
+ if (!this.canPlace(targetNode, dragNode, {leftTopX, leftTopY, width, height})) {
+ canPlace = false
+ }
+
+ if (dragNodeType === 'node' || dragNodeType === 'dashedBox') {
+ dragNode.position(leftTopX, leftTopY)
+ return {newStartNode: dragNode, newEndNode: dragNode, canPlace: canPlace}
+ } else if (dragNodeType === 'bridgeConnection') {
+ return {
+ ...this.createBridgeConnection(leftTopX, leftTopY, dragNode),
+ ...{canPlace: canPlace}
+ }
+ } else {
+ return {
+ ...this.createParallelBrach(leftTopX, centerY, dragNode),
+ ...{canPlace: canPlace}
+ }
+ }
+ },
+ // 鐩镐氦鐨勮竟
+ addNodeAndInsertEdge(graphEdge, dragNode) {
+ const source = graphEdge.getSourceCell()
+ const target = graphEdge.getTargetCell()
+
+ let centerX = 0
+ let centerY = 0
+ if (!source.isNode() || !target.isNode()) {
+ if (source.isNode()) {
+ centerX = source.position().x + source.getBBox().width / 2
+ centerY = dragNode.position().y + dragNode.getBBox().height / 2
+ } else {
+ centerX = target.position().x + target.getBBox().width / 2
+ centerY = dragNode.position().y + dragNode.getBBox().height / 2
+ }
+ } else {
+ centerX = dragNode.position().x + dragNode.getBBox().width / 2
+ centerY = source.position().y + source.getBBox().height / 2
+ if (target.getData().nodeType === 'node' || target.getData().nodeType === 'dashedBox') {
+ centerY = target.position().y + target.getBBox().height / 2
+ }
+ }
+
+ let startNodeId = graphEdge.source.cell
+ let startNode = this.graph.getCellById(startNodeId)
+ let endNodeId = graphEdge.target.cell
+ let endNode = this.graph.getCellById(endNodeId)
+
+ if (startNode && endNode) {
+ let routerStart = ['right'];
+ let routerEnd = ['left'];
+ if (this.isTopBottom(graphEdge)) {
+ routerStart = ['top', 'bottom'];
+ routerEnd = ['top', 'bottom'];
+ }
+
+ let isRight = true;
+ if (this.hasOtherLineToMyLine(graphEdge.id)) {
+ let leftX = startNode.position().x + startNode.getBBox().width
+ let rightX = endNode.position().x
+ // let centerX = dragNode.position().x + dragNode.getBBox().width / 2
+ if (centerX - leftX < rightX - centerX) {
+ isRight = false
+ }
+ }
+ if (isRight) {
+ if (endNode.getData()) {
+ if ("parallel,vote,bridge".indexOf(endNode.getData().nodeType) > -1) {
+ isRight = false
+ }
+ }
+ }
+ let result = this.addNodeAndConnect(null, dragNode, centerX, centerY)
+
+ if (isRight) {
+ graphEdge.target = {cell: result.newStartNode.id}
+ this.graph.addEdge({
+ source: {cell: result.newEndNode},
+ target: {cell: endNode},
+ router: {
+ name: 'manhattan',
+ args: {
+ startDirections: routerStart, // 浠庝笅鏂瑰紑濮�
+ endDirections: routerEnd, // 鍚戝乏鏂圭粨鏉�
+ },
+ },
+ connector: {name: 'rounded'},
+ zIndex: -1
+ })
+ } else {
+ this.graph.addEdge({
+ source: {cell: startNode},
+ target: {cell: result.newStartNode},
+ router: {
+ name: 'manhattan',
+ args: {
+ startDirections: routerStart, // 浠庝笅鏂瑰紑濮�
+ endDirections: routerEnd, // 鍚戝乏鏂圭粨鏉�
+ },
+ },
+ connector: {name: 'rounded'},
+ zIndex: -1
+ })
+ graphEdge.source = {cell: result.newEndNode.id}
+ }
+ if (this.dataForm.autoLayout == 1) {
+ if (!result.canPlace) {
+ //璋冪敤鑷姩鎺掔増
+ this.layoutDiagram()
+ }
+ }
+ // graphEdge.remove()
+ }
+ },
+ findIntersectsEdge(graph, node) {
+ const edges = graph.getEdges()
+ const bbox = node.getBBox();
+ const lines = [bbox.leftLine, bbox.rightLine, bbox.topLine, bbox.bottomLine];
+ let res = [];
+ edges.forEach((edge) => {
+ const view = graph.findViewByCell(edge);
+ lines.forEach((line) => {
+ if (view) {
+ if (view.path.intersectsWithLine(line)) {
+ res.push(edge);
+ }
+ }
+ })
+ })
+ const uniqueArr = res.filter((insEdge, index) =>
+ res.findIndex(i => i.id === insEdge.id) === index);
+ console.log(uniqueArr, 'uniqueArr')
+ if (uniqueArr.length === 1) {
+ return uniqueArr[0]
+ } else {
+ return false
+ }
+ },
+ createParallelBrach(x, y, dragNode) {
+ dragNode.position(x + 320, y - dragNode.size().height / 2)
+ const connectNode = this.createConnectNode(x + 50, y)
+ this.createBrach(dragNode, connectNode, x, y - 50)
+ this.createBrach(dragNode, connectNode, x, y + 50)
+
+ return {newStartNode: connectNode, newEndNode: dragNode}
+ },
+ createBrach(dragNode, connectNode, x, y) {
+ const dashedBox = this.createDashedBox(x + 150, y)
+ dragNode.setData({startNodeId: connectNode.id})
+
+ this.graph.addEdge({
+ source: {cell: connectNode},
+ target: {cell: dashedBox},
+ router: {
+ name: 'manhattan',
+ args: {
+ startDirections: ['top', 'bottom'], // 浠庝笅鏂瑰紑濮�
+ endDirections: ['left'], // 鍚戝乏鏂圭粨鏉�
+ },
+ },
+ connector: {name: 'rounded'},
+ zIndex: -1
+ })
+ this.graph.addEdge({
+ source: {cell: dashedBox},
+ target: {cell: dragNode},
+ router: {
+ name: 'manhattan',
+ args: {
+ startDirections: ['right'], // 浠庝笅鏂瑰紑濮�
+ endDirections: ['top', 'bottom'], // 鍚戝乏鏂圭粨鏉�
+ },
+ },
+ connector: {name: 'rounded'},
+ zIndex: -1
+ })
+ },
+ createBridgeConnection(x, y, dragNode) {
+ console.log(x, y, 'leftX centerY')
+ const leftTopDashedBox = this.createDashedBox(x + 40, y)
+ const rightTopDashedBox = this.createDashedBox(x + 380, y)
+
+ const leftConnectNode = this.createConnectNode(x, y + 87)
+ const alignCenterDashedBox = this.createDashedBox(x + 209, y + 87)
+ const leftBottomDashedBox = this.createDashedBox(x + 40, y + 160)
+ const rightBottomDashedBox = this.createDashedBox(x + 380, y + 160)
+ let edgeTop = this.graph.addEdge({
+ source: {cell: leftTopDashedBox},
+ target: {cell: rightTopDashedBox},
+ router: {
+ name: 'manhattan',
+ args: {
+ startDirections: ['right'], // 浠庝笅鏂瑰紑濮�
+ endDirections: ['left'], // 鍚戝乏鏂圭粨鏉�
+ },
+ },
+ connector: {name: 'rounded'},
+ zIndex: -1
+ })
+ let edgeBottom = this.graph.addEdge({
+ source: {cell: leftBottomDashedBox},
+ target: {cell: rightBottomDashedBox},
+ router: {
+ name: 'manhattan',
+ args: {
+ startDirections: ['right'], // 浠庝笅鏂瑰紑濮�
+ endDirections: ['left'], // 鍚戝乏鏂圭粨鏉�
+ },
+ },
+ connector: {name: 'rounded'},
+ zIndex: -1
+ })
+
+ const rightConnectNode = this.createBridgeNode(x + 530, y + 87, leftConnectNode.id, edgeTop.id, edgeBottom.id)
+
+ rightConnectNode.setData({startNodeId: leftConnectNode.id})
+ leftConnectNode.setData({endNodeId: rightConnectNode.id})
+ /* this.graph.addEdge({
+ source: {cell: startNode, port: 'right1'},
+ target: {cell: leftConnectNode, port: 'left1'},
+ router: {name: 'manhattan'},
+ connector: {name: 'rounded'},
+ })
+ this.graph.addEdge({
+ source: {cell: rightConnectNode, port: 'right1'},
+ target: {cell: endNode, port: 'left1'},
+ router: {name: 'manhattan'},
+ connector: {name: 'rounded'}
+ })*/
+ this.graph.addEdge({
+ source: {cell: leftConnectNode},
+ target: {cell: leftTopDashedBox},
+ router: {
+ name: 'manhattan',
+ args: {
+ startDirections: ['top', 'bottom'],
+ endDirections: ['left'],
+ },
+ },
+ connector: {name: 'rounded'},
+ zIndex: -1
+ })
+ this.graph.addEdge({
+ source: {cell: leftConnectNode},
+ target: {cell: leftBottomDashedBox},
+ router: {
+ name: 'manhattan',
+ args: {
+ startDirections: ['top', 'bottom'], // 浠庝笅鏂瑰紑濮�
+ endDirections: ['left'], // 鍚戝乏鏂圭粨鏉�
+ },
+ },
+ connector: {name: 'rounded'},
+ zIndex: -1
+ })
+
+ this.graph.addEdge({
+ source: {cell: rightTopDashedBox},
+ target: {cell: rightConnectNode},
+ router: {
+ name: 'manhattan',
+ args: {
+ startDirections: ['right'], // 浠庝笅鏂瑰紑濮�
+ endDirections: ['top', 'bottom'], // 鍚戝乏鏂圭粨鏉�
+ },
+ },
+ connector: {name: 'rounded'},
+ zIndex: -1
+ })
+ this.graph.addEdge({
+ source: {cell: rightBottomDashedBox},
+ target: {cell: rightConnectNode},
+ router: {
+ name: 'manhattan',
+ args: {
+ startDirections: ['right'],
+ endDirections: ['top', 'bottom'],
+ },
+ },
+ connector: {name: 'rounded'},
+ zIndex: -1
+ })
+
+ this.graph.addEdge({
+ source: {cell: edgeTop},
+ target: {cell: alignCenterDashedBox},
+ router: {
+ name: 'manhattan',
+ args: {
+ startDirections: ['top', 'bottom'], // 浠庝笅鏂瑰紑濮�
+ endDirections: ['top', 'bottom'], // 鍚戝乏鏂圭粨鏉�
+ },
+ },
+ connector: {name: 'rounded'},
+ zIndex: -1
+ })
+ this.graph.addEdge({
+ source: {cell: alignCenterDashedBox},
+ target: {cell: edgeBottom},
+ router: {
+ name: 'manhattan',
+ args: {
+ startDirections: ['top', 'bottom'], // 浠庝笅鏂瑰紑濮�
+ endDirections: ['top', 'bottom'], // 鍚戝乏鏂圭粨鏉�
+ },
+ },
+ connector: {name: 'rounded'},
+ zIndex: -1
+ })
+ dragNode.remove()
+ return {newStartNode: leftConnectNode, newEndNode: rightConnectNode}
+ },
+ createDashedBox(x, y) {
+ const dashId = getUUID().toString()
+ let dashedBox = this.graph.addNode({
+ shape: 'image',
+ // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
+ width: 60,
+ height: 40,
+ id: dashId,
+ data: {
+ isSelfCreated: true,
+ type: 'imageNodes',
+ dataId: '',
+ nodeType: 'dashedBox',
+ nodeTypeExt: '',
+ voteNum: ''
+ },
+ attrs: {
+ image: {
+ 'xlink:href': '/modelImg/dashedBox.svg',
+ },
+ text: {
+ text: '',
+ fontSize: 14,
+ refX: 0.5,
+ refY: '100%',
+ refY2: 4,
+ textAnchor: 'middle',
+ textVerticalAnchor: 'top',
+ },
+ },
+ ports: {...this.ports},
+ })
+ dashedBox.position(x, y - dashedBox.size().height / 2)
+ return dashedBox
+ },
+ createConnectNode(x, y) {
+ const connectId = getUUID().toString()
+ const dragNodeId = getUUID().toString()
+ let connectNode = this.graph.addNode({
+ shape: 'image',
+ width: 10,
+ height: 10,
+ id: connectId,
+ data: {
+ isSelfCreated: true,
+ type: 'imageNodes',
+ endNodeId: dragNodeId,
+ dataId: '',
+ nodeType: 'connect',
+ nodeTypeExt: '',
+ voteNum: ''
+ },
+ attrs: {
+ image: {
+ 'xlink:href': '/modelImg/connect.svg',
+ },
+ text: {
+ text: '',
+ fontSize: 14,
+ refX: 0.5,
+ refY: '100%',
+ refY2: 4,
+ textAnchor: 'middle',
+ textVerticalAnchor: 'top',
+ },
+ },
+ ports: {...this.ports},
+ })
+ connectNode.position(x, y - connectNode.size().height / 2)
+ return connectNode
+ },
+ createBridgeNode(x, y, connectId, edgeTopId, edgeBottomId) {
+ const dragNodeId = getUUID().toString()
+ let bridgeNode = this.graph.addNode({
+ shape: 'image',
+ width: 30,
+ height: 30,
+ id: dragNodeId,
+ data: {
+ isSelfCreated: true,
+ type: 'imageNodes',
+ startNodeId: connectId,
+ edgeTopId: edgeTopId,
+ edgeBottomId: edgeBottomId,
+ dataId: '',
+ nodeType: 'bridge',
+ nodeTypeExt: '',
+ voteNum: ''
+ },
+ attrs: {
+ image: {
+ 'xlink:href': '/modelImg/connect.svg',
+ },
+ text: {
+ text: 'bridge',
+ fontSize: 14,
+ refX: 0.5,
+ refY: '100%',
+ refY2: 4,
+ textAnchor: 'middle',
+ textVerticalAnchor: 'top',
+ },
+ },
+ ports: {...this.ports},
+ })
+ bridgeNode.position(x, y - bridgeNode.size().height / 2)
+ return bridgeNode
+ },
+ getYRange(inEdges, startNode, pointXY) {
+ for (let inEdge of inEdges) {
+ let nodeId = inEdge.source.cell
+ let node = this.graph.getCellById(nodeId)
+ if (node.position().y < pointXY.minY) {
+ pointXY.minY = node.position().y
+ }
+ if (node.position().y + node.getBBox().height > pointXY.maxY) {
+ pointXY.maxY = node.position().y + node.getBBox().height
+ }
+ if (node.id === startNode.id) {
+ continue
+ }
+ const edges = this.graph.getConnectedEdges(node); // 鑾峰彇鐢诲竷涓婂師鏈夌殑鑺傜偣鎵�鏈夎繘鏉ョ殑绾�
+ let inEdgesPrev = edges.filter(edge => edge.target.cell === node.id)
+ this.getYRange(inEdgesPrev, startNode, pointXY)
+ }
+ },
+ isSeriesNode(startNode, endNode) {
+ let result = false
+ let inNode = null
+ let outNode = null
+ let inEdges = this.getInLinesOfNode(startNode)
+ console.log(inEdges, 'inEdges')
+ if (inEdges.length === 1) {
+ let isMyLineToOtherLine = this.isMyLineToOtherLine(inEdges[0])
+ let hasOtherLineToMyLine = this.hasOtherLineToMyLine(inEdges[0].id)
+ let inNodeId = inEdges[0].source.cell
+ inNode = this.graph.getCellById(inNodeId)
+ if (!isMyLineToOtherLine && !hasOtherLineToMyLine) {
+ let inNodeType = inNode.getData().nodeType
+ console.log(inNodeType, 'inNodeType')
+ if ('node,dashedBox,parallel,switch,vote,bridge'.indexOf(inNodeType) > -1) {
+ result = true
+ }
+ }
+ }
+ let outEdges = this.getOutLinesOfNode(endNode)
+ console.log(outEdges, 'outEdges')
+ if (outEdges.length === 1) {
+ let isMyLineToOtherLine = this.isMyLineToOtherLine(outEdges[0])
+ let hasOtherLineToMyLine = this.hasOtherLineToMyLine(outEdges[0].id)
+ let outNodeId = outEdges[0].target.cell
+ outNode = this.graph.getCellById(outNodeId)
+ if (!isMyLineToOtherLine && !hasOtherLineToMyLine) {
+ let outNodeType = outNode.getData().nodeType
+ if ('node,connect,dashedBox'.indexOf(outNodeType) > -1) {
+ result = true
+ }
+ }
+ }
+ console.log(result, 'result')
+ if (result && inNode && outNode) {
+ console.log(inNode, outNode, 'inNode, outNode')
+ return {inNode, outNode}
+ } else {
+ return false
+ }
+ },
+ hasOtherLineToMyLine(edgeId) {
+ for (let edge of this.graph.getEdges()) {
+ if (edge.source.cell === edgeId || edge.target.cell === edgeId)
+ return true
+ }
+ return false
+ },
+ isMyLineToOtherLine(myEdge) {
+ for (let edge of this.graph.getEdges()) {
+ if (myEdge.source.cell === edge.id || myEdge.target.cell === edge.id)
+ return true
+ }
+ return false
+ },
+ isTopBottom(edge) {
+ if (this.hasTopBottom(edge.getRouter().args.startDirections) && this.hasTopBottom(edge.getRouter().args.endDirections)) {
+ return true
+ }
+ return false
+ },
+ hasTopBottom(object) {
+ let result = false
+ for (let a of object) {
+ if (a == "top" || a == "bottom") {
+ result = true
+ break
+ }
+ }
+ return result
+ },
+ isMultipleBrach(node) {
+ let outEdges = this.getOutLinesOfNode(node)
+ let outNodeId = outEdges[0].target.cell
+ if (this.isTopBottom(outEdges[0]))
+ return false
+ let outNode = this.graph.getCellById(outNodeId)
+ if ('bridge,end'.indexOf(outNode.getData().nodeType) > -1) {
+ return false
+ }
+ let inEdges = this.getInLinesOfNode(outNode)
+ return inEdges.length > 1;
+ },
+ deleteCombination(node) {
+ let startNode = this.graph.getCellById(node.getData().startNodeId)
+ let allCombinationNodes = []
+ console.log(startNode, 'startNode')
+ this.getAllCombinationNodes(startNode.id, node, allCombinationNodes)
+ console.log(allCombinationNodes, 'allCombinationNodes')
+ this.graph.removeCells(allCombinationNodes)
+ },
+ getAllCombinationNodes(startNodeId, node, allCombinationNodes) {
+ allCombinationNodes.push(node)
+ if (node.id == startNodeId || node.isEdge()) {
+ return
+ }
+ let inEdges = this.getInLinesOfNode(node) // 濡傛灉锛燂紵锛�
+ for (let inEdge of inEdges) {
+ let lineNode = this.getNodeOfConectLine(inEdge)
+ if (lineNode) {
+ this.getAllCombinationNodes(startNodeId, lineNode, allCombinationNodes)
+ }
+ let inNodeId = inEdge.source.cell
+ let inNode = this.graph.getCellById(inNodeId)
+ if (inNode.isEdge())
+ continue
+ this.getAllCombinationNodes(startNodeId, inNode, allCombinationNodes)
+ }
+ },
+ getNodeOfConectLine(paramEdge) {
+ for (let edge of this.graph.getEdges()) {
+ let nodeId = null
+ /* if (edge.source.cell === paramEdge.id){
+ nodeId = edge.target.cell
+ }*/
+ if (edge.target.cell === paramEdge.id) {
+ nodeId = edge.source.cell
+ }
+ if (nodeId) {
+ let node = this.graph.getCellById(nodeId)
+ if (node.isNode())
+ return node
+ }
+ }
+ return null
+ },
+ getInLinesOfNode(node) {
+ const edges = this.graph.getConnectedEdges(node); // 鑾峰彇鐢诲竷涓婂師鏈夌殑鑺傜偣鎵�鏈夎繘鏉ョ殑绾�
+ console.log(edges, '鑾峰彇鐢诲竷涓婂紑濮嬭妭鐐规墍鏈夌殑绾� edges')
+ return edges.filter(edge => edge.target.cell === node.id)
+ },
+ getOutLinesOfNode(node) {
+ console.log(node, '鑾峰彇鐢诲竷涓婄殑缁撴潫鑺傜偣 node')
+ const edges = this.graph.getConnectedEdges(node); // 鑾峰彇鐢诲竷涓婂師鏈夌殑鑺傜偣鎵�鏈夎繘鏉ョ殑绾�
+ console.log(edges, '鑾峰彇鐢诲竷涓婄殑缁撴潫鑺傜偣鎵�鏈夌殑绾� edges')
+ return edges.filter(edge => edge.source.cell === node.id)
+ },
+ canPlace(targetNode, dragNode, box2) {
+ const nodes = this.graph.getNodes()
+ let intersectNodes = []
+ // 妫�鏌ラ櫎褰撳墠鑺傜偣涔嬪鐨勬墍鏈夎妭鐐圭殑鍖呭洿妗嗘槸鍚︾浉浜�
+ for (const otherNode of nodes) {
+ if (otherNode === dragNode || otherNode === targetNode) continue;
+ const bbox1 = otherNode.getBBox();
+ if (bbox1.x < box2.leftTopX + box2.width &&
+ bbox1.x + bbox1.width > box2.leftTopX &&
+ bbox1.y < box2.leftTopY + box2.height &&
+ bbox1.y + bbox1.height > box2.leftTopY) {
intersectNodes.push(otherNode);
}
}
- if (intersectNodes.length > 0) {
- // console.log('Nodes intersect with node:', node.id);
- console.log('Intersecting nodes:', intersectNodes.map(n => n)); // 鐩镐氦鑺傜偣鐨勫璞�
- intersectNodes.map(node => {
- this.addNodeAndConnect(node, nodeObj);
- })
+ console.log(box2, 'box2')
+ console.log(intersectNodes, 'intersectNodes')
+ return intersectNodes.length <= 0;
+ },
+ undo() {
+ if (this.graph.history.canUndo()) {
+ this.graph.history.undo()
}
- });
- this.graph.on('cell:click', ({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
- console.log(this.nodeType, cell.id, 'this.nodeType')
+ },
+ redo() {
+ if (this.graph.history.canRedo()) {
+ this.graph.history.redo()
}
- 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',
- },
- },
-
- })
- })
- // 鍗曞嚮node鑺傜偣
- this.graph.on('node:click', ({node}) => {
- })
- // 鎺у埗杩炴帴妗╂樉绀�/闅愯棌
- 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()
- })
-
- await this.getDiagram(this.dataForm.id)
- },
- showPorts(ports, show) {
- for (let i = 0, len = ports.length; i < len; i = i + 1) {
- ports[i].style.visibility = show ? 'visible' : 'hidden'
}
},
- reset() {
- this.graph.drawBackground({color: '#fff'})
- const nodes = this.graph.getNodes()
- const edges = this.graph.getEdges()
- nodes.forEach((node) => {
- node.attr('body/stroke', '#5F95FF')
- })
- edges.forEach((edge) => {
- edge.attr('line/stroke', '#5F95FF')
- edge.prop('labels/0', {
- attrs: {
- body: {
- stroke: '#5F95FF',
- },
- },
- })
- })
- },
- async search() {
- await this.getDiagram();
- },
- async saveDiagram() {
- console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
- 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.$alert('淇濆瓨鎴愬姛', '鎻愮ず', {
- confirmButtonText: '纭畾'
- })
- }
- })
- },
- async analyzeDiagram() {
- console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
- 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.$alert('瑙ｆ瀽鎴愬姛', '鎻愮ず', {
- confirmButtonText: '纭畾'
- })
- }
- })
- },
- leftAlign() {
- const NODE = this.graph.getSelectedCells()
- let leftX = null
- for (let a of NODE) {
- if (leftX == null || a.getBBox().x < leftX) {
- leftX = a.getBBox().x
- }
- }
- for (let a of NODE) {
- let y = a.getBBox().y
- a.position(leftX, y)
- // console.log(leftX, ':', y, ' x:y')
- }
- },
- topAlign() {
- const NODE = this.graph.getSelectedCells()
- let topY = null
- for (let a of NODE) {
- console.log(a.getBBox(), 'a.getBBox()')
- if (topY == null || a.getBBox().y < topY) {
- topY = a.getBBox().y
- }
- }
- for (let a of NODE) {
- let x = a.getBBox().x
- a.position(x, topY)
- // console.log(leftX, ':', y, ' x:y')
- }
- },
- centerAlign() {
- const NODE = this.graph.getSelectedCells()
- let rightX = null
- let leftX = null
- for (let a of NODE) {
- if (leftX == null || a.getBBox().x < leftX) {
- leftX = a.getBBox().x
- }
- }
- for (let a of NODE) {
- if (rightX == null || a.getBBox().x + a.getBBox().width > rightX) {
- rightX = a.getBBox().x + a.getBBox().width
- }
- }
-
- let centerX = leftX + (rightX - leftX) / 2
-
- for (let a of NODE) {
- let y = a.getBBox().y
- a.position(centerX - a.getBBox().width / 2, y)
- // console.log(leftX, ':', y, ' x:y')
- }
- },
- shuipingAlign() {
- const NODE = this.graph.getSelectedCells()
- let bottomY = null
- let topY = null
- for (let a of NODE) {
- if (topY == null || a.getBBox().y || 0 < topY) {
- topY = a.getBBox().y
- }
- }
- for (let a of NODE) {
- if (bottomY == null || a.getBBox().y + a.getBBox().height > bottomY) {
- bottomY = a.getBBox().y + a.getBBox().height
- }
- }
-
- let centerY = topY + (bottomY - topY) / 2
- for (let a of NODE) {
- let x = a.getBBox().x
- let centerHei = a.getBBox().height / 2
- a.position(x, centerY - centerHei)
- }
- },
- rightAlign() {
- const NODE = this.graph.getSelectedCells()
- let rightX = null
- for (let a of NODE) {
- if (rightX == null || a.getBBox().x + a.getBBox().width > rightX) {
- rightX = a.getBBox().x + a.getBBox().width
- }
- }
- for (let a of NODE) {
- let y = a.getBBox().y
- a.position(rightX - a.getBBox().width, y)
- }
- },
- bottomAlign() {
- const NODE = this.graph.getSelectedCells()
- let bottomY = null
- for (let a of NODE) {
- if (bottomY == null || (a.getBBox().y + a.getBBox().height) > bottomY) {
- bottomY = a.getBBox().y + a.getBBox().height
- }
- }
-
- for (let a of NODE) {
- let x = a.getBBox().x
- a.position(x, bottomY - a.getBBox().height)
- }
- },
- close() {
- if (this.timer) {
- window.clearInterval(this.timer)
- }
- },
- // 瀹氫箟鍑芥暟鏉ユ鏌ヤ袱涓寘鍥存鏄惁鐩镐氦
- isIntersect(bbox1, bbox2) {
- return (
- bbox1.x < bbox2.x + bbox2.width &&
- bbox1.x + bbox1.width > bbox2.x &&
- bbox1.y < bbox2.y + bbox2.height &&
- bbox1.y + bbox1.height > bbox2.y
- )
- },
- addNodeAndConnect(node, nodeObj) { // node鏄敾甯冨師鏈夌殑鑺傜偣銆俷odeObj鏄綋鍓嶆嫋鎷界殑鑺傜偣
- const nodeType = node.getData().nodeType // 鑾峰彇鑺傜偣绫诲瀷
- const edges = this.graph.getConnectedEdges(node); // 鑾峰彇涓庡師鑺傜偣鐩稿叧鑱旂殑鎵�鏈夎繛鎺ョ嚎
- let TopSum = 0 // 鍦ㄥ師鑺傜偣涓婃柟
- let BottomSum = 0 // 鍦ㄥ師鑺傜偣涓嬫柟
- const edgesSum = edges.length
- if (nodeType !== 'node') {
- if (edges.length === 0) {
- if (!this.nodeAdded) {
- // 娣诲姞鑺傜偣鐨勬搷浣�
- this.connectNode = this.graph.addNode({
- shape: 'image',
- // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
- width: 30,
- height: 30,
- data: {
- type: 'imageNodes',
- dataId: '',
- nodeType: 'connect',
- nodeTypeExt: '',
- voteNum: ''
- },
- attrs: {
- image: {
- 'xlink:href': '/modelImg/connect.svg',
- },
- text: {
- text: 'connect',
- fontSize: 14,
- refX: 0.5,
- refY: '100%',
- refY2: 4,
- textAnchor: 'middle',
- textVerticalAnchor: 'top',
- },
- },
- ports: {...this.ports},
- })
- // 璁剧疆鏍囪涓� true锛岃〃绀哄凡缁忔坊鍔犺繃鑺傜偣
- this.nodeAdded = true;
- }
- nodeObj.position(node.position().x - 240, node.position().y - (120 * edgesSum));
- this.connectNode.position(node.position().x - 480, node.position().y + (node.size().height - this.connectNode.size().height) / 2);
- } else if (edges.length === 1) {
- // 灏嗚妭鐐圭Щ鍔ㄥ埌鎸囧畾鐨勪綅缃�
- nodeObj.position(node.position().x - 240, node.position().y - (120 * edgesSum));
- } else {
- for (const edge of edges) {
- const sourcePointY = edge.getSourcePoint().y; // 鑾峰彇杩炴帴绾跨殑璧峰鐐箉鍧愭爣
- const targetPointY = edge.getTargetPoint().y; // 鑾峰彇杩炴帴绾跨殑缁撴潫鐐箉鍧愭爣
- console.log('鍘熻妭鐐筜鍧愭爣' + node.position().y, '杩炴帴绾胯捣濮媃鍧愭爣' + sourcePointY)
- if (targetPointY > sourcePointY) {
- TopSum++
- } else if (targetPointY < sourcePointY) {
- BottomSum++
- }
- }
- console.log('鍦ㄥ師鑺傜偣涓婃柟鐨勮繛鎺ョ嚎鏁伴噺:' + TopSum, '鍦ㄥ師鑺傜偣涓嬫柟鐨勮繛鎺ョ嚎鏁伴噺:' + BottomSum)
- if (TopSum > BottomSum) {
- nodeObj.position(node.position().x - 240, node.position().y + (120 + (120 * BottomSum)))
- } else {
- nodeObj.position(node.position().x - 240, node.position().y - (120 + (120 * TopSum)));
- }
- }
- this.graph.addEdge({
- source: {cell: nodeObj, port: 'right1'},
- target: {cell: node, port: 'left1'},
- router: {name: 'manhattan'},
- connector: {name: 'rounded'}
- })
- if (this.nodeAdded) {
- console.log(this.connectNode, 'connectNode')
- this.graph.addEdge({
- source: {cell: this.connectNode, port: 'right1'},
- target: {cell: nodeObj, port: 'left1'},
- router: {name: 'manhattan'},
- connector: {name: 'rounded'}
- })
- }
- } else {
- // 閬嶅巻鎵�鏈夎繛鎺ョ嚎骞跺垹闄や笌缁欏畾鑺傜偣瀵硅薄鐩稿叧鐨勮繛鎺ョ嚎
- console.log(edges, '鎵�鏈夋湁鍏宠仈鐨勮繛鎺ョ嚎 edge')
- if(edges.length === 0){
- this.graph.addEdge({
- source: {cell: node, port: 'right1'},
- target: {cell: nodeObj, port: 'left1'},
- router: {name: 'manhattan'},
- connector: {name: 'rounded'}
- })
- return nodeObj.position(node.position().x +node.getBBox().width+50, node.position().y);
- }else {
- for (const edge of edges) {
- console.log(edge, '鎵�鏈夋湁鍏宠仈鐨勮繛鎺ョ嚎 edge')
- if (edge.source.cell === node.id) { // 濡傛灉杩炴帴绾跨殑璧峰鑺傜偣绛変簬褰撳墠鐢诲竷鐩爣鑺傜偣鐨処D
- const sourceNode = this.graph.getCellById(edge.source.cell); // 鑾峰彇杩炴帴绾跨殑婧愯妭鐐瑰璞�
- const targetNode = this.graph.getCellById(edge.target.cell) // 鑾峰彇杩炴帴绾跨殑鐩爣鑺傜偣瀵硅薄
- console.log(sourceNode, targetNode, 'targetNode 鐩爣鑺傜偣瀵硅薄')
- // edge.remove(); // 浠庡浘涓垹闄よ杩炴帴绾�
- nodeObj.position(node.position().x +node.getBBox().width+50, node.position().y);
- // edge.source = {cell: node, port: 'right1'}
- edge.target = {cell: nodeObj, port: 'left1'}
- // targetNode.position(nodeObj.position().x +nodeObj.getBBox().width+50, node.position().y);
- // this.graph.addEdge({
- // source: {cell: node, port: 'right1'},
- // target: {cell: nodeObj, port: 'left1'},
- // router: {name: 'manhattan'},
- // connector: {name: 'rounded'}
- // })
- this.graph.addEdge({
- source: {cell: nodeObj, port: 'right1'},
- target: {cell: targetNode, port: 'left1'},
- router: {name: 'manhattan'},
- connector: {name: 'rounded'}
- })
- }else {
- this.graph.addEdge({
- source: {cell: node, port: 'right1'},
- target: {cell: nodeObj, port: 'left1'},
- router: {name: 'manhattan'},
- connector: {name: 'rounded'}
- })
- nodeObj.position(node.position().x +node.getBBox().width+50, node.position().y);
- }
- }
- }
-
-
- }
- },
- },
-
-}
+ }
</script>
<style>
-#containerImg {
- display: flex;
- border: 1px solid #dfe3e8;
- height: 400px;
- width: 100% !important;
-}
+ #containerImg {
+ display: flex;
+ /*border: 1px solid #dfe3e8;*/
+ height: 400px;
+ width: 100% !important;
+ }
-.x6-graph-scroller.x6-graph-scroller-pannable {
- width: 100% !important;
-}
+ .x6-graph-scroller.x6-graph-scroller-pannable {
+ width: 100% !important;
+ }
-#stencilImg {
- width: 100%;
- height: 100%;
- position: relative;
- border-right: 1px solid #dfe3e8;
-}
+ #stencilImg {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ border-right: 1px solid #dfe3e8;
+ }
-.x6-widget-stencil {
- position: relative;
- height: 100%;
-}
+ .x6-widget-stencil {
+ position: relative;
+ height: 100%;
+ }
-#stencilImg .x6-graph-svg-viewport {
- height: 100%;
-}
+ #stencilImg .x6-graph-svg-viewport {
+ height: 100%;
+ }
-.x6-widget-stencil-content {
- position: relative;
- height: calc(100% - 32px);
-}
+ .x6-widget-stencil-content {
+ position: relative;
+ height: calc(100% - 32px);
+ }
-#stencilImg .x6-widget-stencil.collapsable > .x6-widget-stencil-content {
- top: 0
-}
+ #stencilImg .x6-widget-stencil.collapsable > .x6-widget-stencil-content {
+ top: 0
+ }
+ #containerImg .x6-graph-pagebreak>.x6-graph-pagebreak-horizontal {
+ position: absolute;
+ right: 0;
+ left: 0;
+ box-sizing: border-box;
+ height: 0;
+ border-top: none;
+ }
+ #containerImg .x6-graph-pagebreak>.x6-graph-pagebreak-vertical {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ box-sizing: border-box;
+ width: 0;
+ border-left: none;
+ }
</style>
--
Gitblit v1.9.1