From 9ef61aec5e8b218db9d60941ef3ad576a927338b Mon Sep 17 00:00:00 2001
From: xyc <jc_xiong@hotmail.com>
Date: 星期五, 26 四月 2024 11:05:05 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
web/src/views/modules/taskReliability/RBD-edit-img.vue | 2411 +++++++++++++++++++++++++++------------------------------
1 files changed, 1,142 insertions(+), 1,269 deletions(-)
diff --git a/web/src/views/modules/taskReliability/RBD-edit-img.vue b/web/src/views/modules/taskReliability/RBD-edit-img.vue
index 1991943..1beb7ca 100644
--- a/web/src/views/modules/taskReliability/RBD-edit-img.vue
+++ b/web/src/views/modules/taskReliability/RBD-edit-img.vue
@@ -1,84 +1,49 @@
<template>
<div>
<el-row :gutter="[8,8]">
- <el-col :span="5">
+ <el-col :span="4">
<div :style="'height:' +left_p+'px'">
- <div class="fa-card-a" style="height: 100%">
+ <div style="height: 100%">
<div id="stencilImg"></div>
</div>
</div>
</el-col>
- <el-col :span="19">
+ <el-col :span="20">
<div class="fa-card-a">
<el-form :inline="true">
- <el-form-item prop="projectId" style="margin-left:10px;width: 180px;">
- <zt-select v-model="projectId" :datas="projectList" clearable placeholder="宸ョ▼椤圭洰"
- @change="projectChange"></zt-select>
+ <el-form-item>
+ 妯″瀷鍚嶇О锛歿{ modelName }}
</el-form-item>
<el-form-item>
- <el-select v-model="diagramId" :disabled="diagramIdDisabled" placeholder="璇烽�夋嫨"
- @change="diagramIdChanges">
- <el-option v-for="item in diagramList"
- :key="item.diagramId"
- :label="item.diagramName"
- :value="item.diagramId">
- </el-option>
- </el-select>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" @click="saveDiagram()">淇濆瓨</el-button>
- <!-- <zt-button type="primary" v-show="pageCode === 'wlt_sp' && flowInfo.myStatus ===1" @click="reject()">椹冲洖</zt-button>-->
- <el-button v-show="pageCode === 'wlt_pz' && flowInfo.myStatus ===1" type="warning" @click="finish">瀹屾垚
+ <el-button type="primary" @click="saveDiagram()">鏆傚瓨</el-button>
+ <el-button type="primary" @click="analyzeDiagram()">淇濆瓨</el-button>
+ <el-button type="primary" @click="clearDiagram()">娓呯┖鍥惧舰</el-button>
+ <el-button @click="leftAlign()">
+ <i style="font-size: 1rem;" class="wt-iconfont icon-zuoduiqi"></i>
</el-button>
- </el-form-item>
- <el-form-item>
- <el-tooltip class="item" effect="dark" content="宸﹀榻�" placement="left">
- <el-button class="" style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF;"
- @click="leftAlign()"><i style="font-size: 2rem;"
- class="wt-iconfont icon-zuoduiqi"></i></el-button>
- </el-tooltip>
- </el-form-item>
- <el-form-item>
- <el-tooltip class="item" effect="dark" content="灞呬腑瀵归綈" placement="left">
- <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"
- @click="centerAlign()"><i style="font-size: 2rem;"
- class="wt-iconfont icon-chuizhiduiqi"></i></el-button>
- </el-tooltip>
- </el-form-item>
- <el-form-item>
- <el-tooltip class="item" effect="dark" content="鍙冲榻�" placement="left">
- <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"
- @click="rightAlign()"><i style="font-size: 2rem;"
- class="wt-iconfont icon-youduiqi"></i></el-button>
- </el-tooltip>
- </el-form-item>
- <el-form-item>
- <el-tooltip class="item" effect="dark" content="椤堕儴瀵归綈" placement="left">
- <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"
- @click="topAlign()"><i style="font-size: 2rem;"
- class="wt-iconfont icon-dingduiqi"></i></el-button>
- </el-tooltip>
- </el-form-item>
- <el-form-item>
- <el-tooltip class="item" effect="dark" content="姘村钩瀵归綈" placement="left">
- <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"
- @click="shuipingAlign()"><i style="font-size: 2rem;"
- class="wt-iconfont icon-shuipingduiqi"></i></el-button>
- </el-tooltip>
- </el-form-item>
- <el-form-item>
- <el-tooltip class="item" effect="dark" content="搴曢儴瀵归綈" placement="left">
- <el-button style="margin-left: 0;padding: 2px;border: 1px solid #5F95FF"
- @click="bottomAlign()"><i style="font-size: 2rem;"
- class="wt-iconfont icon-diduiqi"></i></el-button>
- </el-tooltip>
+ <el-button @click="centerAlign()">
+ <i style="font-size: 1rem;" class="wt-iconfont icon-chuizhiduiqi"></i>
+ </el-button>
+ <el-button @click="rightAlign()">
+ <i style="font-size: 1rem;" class="wt-iconfont icon-youduiqi"></i>
+ </el-button>
+ <el-button @click="topAlign()">
+ <i style="font-size: 1rem;" class="wt-iconfont icon-dingduiqi"></i>
+ </el-button>
+ <el-button @click="shuipingAlign()">
+ <i style="font-size: 1rem;" class="wt-iconfont icon-shuipingduiqi"></i>
+ </el-button>
+ <el-button @click="bottomAlign()">
+ <i style="font-size: 1rem;" class="wt-iconfont icon-diduiqi"></i>
+ </el-button>
</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%);">
+ 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"/>
@@ -89,1245 +54,1145 @@
</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 {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'
- export default {
- name: 'RBD-edit-img',
- /*props: {
+export default {
+ name: 'RBD-edit-img',
+ /*props: {
- },*/
- props: {
- projectId: {
- type: String
- },
- diagarmId: {
- type: String
- },
- pageCode: {
- default: 'wlt_pz'
- },
- flowCode: {
- type: String,
- default: 'wltFlow'
- },
+ },*/
+ props: {
+ projectId: {
+ type: String
},
- components: {
- ConfigNode,
- ConfigEdge
+ diagarmId: {
+ type: String
},
- data() {
- return {
- 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:'parallelLeft',imgName:'parallelLeft',nodeType:'parallelLeft',imgWidth:60,imgHeight:60,imgId:'3',data:{}},
- {imgPath:'parallelRight',imgName:'parallelRight',nodeType:'parallelRight',imgWidth:60,imgHeight:60,imgId:'4',data:{}},
- {imgPath:'switchRight',imgName:'switchRight',nodeType:'switchRight',imgWidth:60,imgHeight:60,imgId:'5',data:{}},
- {imgPath:'voteRight',imgName:'voteRight',nodeType:'voteRight',imgWidth:60,imgHeight:60,imgId:'6',data:{}},
- ],
- imgsList2:[
- {imgPath:'logo',imgName:'logo',nodeType:'node',imgWidth:60,imgHeight:60,imgId:'100',data:{dataId:'123456',nodeTypeExt:'aaa'}},
- ],
- first: true,
- shape: '',
- projectList: [],
- diagramList: [],
- diagramId: '',
- projectId: '',
- diagramJson: '',
- diagramIdDisabled: false,
- dataForm: {
- id: null,
- projectId: null,
- diagramId: null,
- content: null,
- publishContent: null,
- hasPublish: 0,
- modelId: 1,
+ 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: {}
},
- flowInfo: {
- bizId: '',
- bizGroupId: '',
- flowCode: '',
- flowStepMark: '',
- status: 0,
- myStatus: 0
+ {
+ imgPath: 'switch',
+ imgName: 'switch',
+ nodeType: 'switch',
+ imgWidth: 60,
+ imgHeight: 60,
+ imgId: '5',
+ data: {}
},
- // 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)'
- // // },
- // // },
- // }
- // ],
+ {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: '',
+ },
+ // 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,
+ },
+ isReady: false,
+ curCel: Cell,
+ left_p: document.documentElement.clientHeight - 100,
+ ports: {
+ groups: {
+ top: {
+ position: {name: 'top'},
+ attrs: {
+ circle: {
+ r: 4,
+ magnet: true,
+ stroke: '#5F95FF',
+ strokeWidth: 1,
+ fill: '#fff',
+ style: {
+ visibility: 'hidden',
+ },
+ },
+ },
+ },
+ right: {
+ position: {name: 'right'},
+ attrs: {
+ circle: {
+ r: 4,
+ magnet: true,
+ stroke: '#5F95FF',
+ strokeWidth: 1,
+ fill: '#fff',
+ style: {
+ visibility: 'hidden',
+ },
+ },
+ },
+ },
+ bottom: {
+ position: {name: 'bottom'},
+ attrs: {
+ circle: {
+ r: 4,
+ magnet: true,
+ stroke: '#5F95FF',
+ strokeWidth: 1,
+ fill: '#fff',
+ style: {
+ visibility: 'hidden',
+ },
+ },
+ },
+ },
+ left: {
+ position: {name: 'left'},
+ attrs: {
+ circle: {
+ r: 4,
+ magnet: true,
+ stroke: '#5F95FF',
+ strokeWidth: 1,
+ fill: '#fff',
+ style: {
+ visibility: 'hidden',
+ },
+ },
+ },
+ },
+ },
+ items: [
+ {
+ id: 'top1',
+ group: 'top',
+ },
+ {
+ id: 'right1',
+ group: 'right',
+ },
+ {
+ id: 'bottom1',
+ group: 'bottom',
+ },
+ {
+ id: 'left1',
+ group: 'left',
+ },
+ ],
+ }
+ }
+ },
+ watch: {
+ '$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,
+ },
+ autoResize: true,
+ history: {
+ enabled: true,
+ beforeAddCommand(event, args) {
+ if (args.key === 'tools') {
+ console.log(args.key, 'event, args')
+ return false
+ }
+ },
+ },
+ // panning: {
+ // enabled: true,
// },
- type: '',
- id: '',
- graph: null,
- globalGridAttr: {
- 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: 'normal',
- 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-220,
- ports: {
- groups: {
- top: {
- position: 'top',
- attrs: {
- circle: {
- r: 4,
- magnet: true,
- stroke: '#5F95FF',
- strokeWidth: 1,
- fill: '#fff',
- style: {
- visibility: 'hidden',
- },
- },
- },
- },
- right: {
- position: 'right',
- attrs: {
- circle: {
- r: 4,
- magnet: true,
- stroke: '#5F95FF',
- strokeWidth: 1,
- fill: '#fff',
- style: {
- visibility: 'hidden',
- },
- },
- },
- },
- bottom: {
- position: 'bottom',
- attrs: {
- circle: {
- r: 4,
- magnet: true,
- stroke: '#5F95FF',
- strokeWidth: 1,
- fill: '#fff',
- style: {
- visibility: 'hidden',
- },
- },
- },
- },
- left: {
- position: 'left',
- attrs: {
- circle: {
- r: 4,
- magnet: true,
- stroke: '#5F95FF',
- strokeWidth: 1,
- fill: '#fff',
- style: {
- visibility: 'hidden',
- },
- },
- },
- },
- },
- items: [
- {
- group: 'top',
- },
- {
- group: 'right',
- },
- {
- group: 'bottom',
- },
- {
- 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')
- this.projectChange2(this.$route.params.diagramId)
- }
- },
- mounted() {
- this.getProject()
- this.init()
- this.type = 'grid'
- },
- methods: {
- async finish() {
- if (await this.$tip.confirm('纭畾瑕佽繘琛屾彁浜ゆ搷绾靛悧?')) {
- let submitForm = {
- params: {
- wfIdCode: 'wltFlow',
- bizId: this.dataForm.projectId,
- stepIdMark: this.pageCode
- }
- }
- let res = await this.$http.get('/wf/approvePass', submitForm)
- if (res.success) {
- await this.$alert('鎻愪氦鎴愬姛', '鍙嬫儏鎻愮ず')
- removeCurrentTabHandle(this)
- this.$EventBus.$emit('taskRefeshEvent', '缃戠粶鍥�')
- }
- }
- },
- async getProject() {
- //let res = await this.$http.get(`/maintain/projectNetworkDiagram/getProjectList`)
- let res = await this.$http.get(`/homeFunction/projectSelect`)
-
- this.projectList = res.data
- if (this.$store.state.user.isAdmin || this.$store.state.user.isAssistant) {
- this.projectList.push({id: '10000', name: '鏍峰紡妯℃澘'})
- }
- if (this.$route.params.projectId) {
- this.projectId = this.$route.params.projectId
- this.diagramId = this.$route.params.diagramId
- } else {
- if (this.projectList.length > 0) {
- this.projectId = this.projectList[0].id
- this.diagramId = this.projectId
- console.log(this.diagramId, '123456789')
- }
- }
- await this.projectChange2(this.diagramId)
- },
-
- projectChange() {
- // alert(555)
- this.projectChange2(this.projectId)
- },
-
- async projectChange2(diagramId) {
- // alert(1)
- let params = {
- wfIdCodes: 'wltFlow',
- bizId: this.projectId,
- stepIdMark: 'wlt_pz'
- }
- this.$http.get(`/wf/getFlowStepStatus`, {params: params}).then(res => {
- console.log(res, 'getFlowStepStatus res')
- if (res.data) {
- this.flowInfo = res.data
- }
- })
-
- this.diagramName = ''
- this.dataForm.projectId = this.projectId
- this.dataForm.diagramId = diagramId
- this.diagramId = diagramId
- if (!this.$store.state.user.isZcRole && !this.$store.state.user.isAdmin) {
- this.diagramIdDisabled = true
- console.log(this.$store.state.user.deptId, 'this.$store.state.user.deptId')
- this.diagramId = this.$store.state.user.deptId
- this.dataForm.diagramId = this.diagramId
- } else {
- this.diagramIdDisabled = false
- }
- //this.getDiagramIdList(this.projectId)
- let res = await this.$http.get(`/maintain/projectNetworkDiagram/getDiagramCjList?projectId=${this.projectId}`)
- this.diagramList = res.data
- console.log(this.diagramList, 'this.diagramId asdfgh')
- if (this.diagramList.length > 0) {
- this.diagramId = this.diagramList[0].diagramId
- console.log(this.dataForm.diagramId, 'this.dataForm.diagramId.........................')
- }
- await this.getDiagram()
- },
-
- diagramIdChanges() {
- this.dataForm.diagramId = this.diagramId
- // this.diagramIdChange(this.diagramId)
- this.getDiagram()
- },
- async getDiagram() {
- let includeCj = false
- console.log(this.diagramList, 'this.diagramList')
- console.log(this.diagramId, 'this.diagramId')
- for (let val of this.diagramList) {
- if (val.diagramId == this.diagramId) {
- includeCj = true
- break
- }
- }
- console.log(includeCj, 'includeCj')
- if (includeCj) {
- // alert(3)
- let params = {
- projectId: this.dataForm.projectId,
- diagramId: this.dataForm.diagramId,
- isShow: 'edit'
- }
- console.log(params, 'params')
- let res = await this.$http.get(`/maintain/projectNetworkDiagram/getDiagram`, {params: params})
- if (res.data !== null && res.data.content != null) {
- this.dataForm = res.data
- 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.centerContent()
- this.graph.zoomToFit()
- } else {
- this.dataForm.id = null
- // this.graph.fromJSON(this.emptyJson)
- this.graph.centerContent()
- this.graph.zoomToFit()
- // this.graph.freeze()
- }
- } else {
- this.dataForm.id = null
- console.log(this.data, 'this.data asdfg')
- // this.graph.fromJSON(this.emptyJson)
- this.graph.positionContent('left',{ padding: { left: 200 }})
- // this.graph.centerContent()
- // this.graph.zoomToFit()
- }
- },
- init() {
- 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 - 220,
- // async: true,
- grid: {
- visible: true,
- },
- onToolItemCreated({tool}) {
- const handle = tool
- const options = handle.options
- if (options && options.index % 2 === 1) {
- tool.setAttrs({fill: 'red'})
- }
- },
+ scroller: {
+ enabled: true,
+ pageVisible: true,
autoResize: true,
- history: true,
- // panning: {
- // enabled: true,
- // },
- scroller: {
- enabled: true,
- pageVisible: true,
- pageBreak: true,
- pannable: 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: {
+ // padding: 1,
+ // },
},
- mousewheel: {
- enabled: true,
- zoomAtMousePosition: true,
- modifiers: 'ctrl',
- minScale: 0.1,
- maxScale: 10,
- },
- connecting: {
- router: {
- name: 'normal',
- // args: {
- // padding: 1,
- // },
- },
- connector: {
- name: 'rounded',
- args: {
- radius: 8,
- },
- },
- // anchor: 'center',
- connectionPoint: 'anchor',
- allowBlank: false,
- snap: {
- radius: 20,
- },
- createEdge() {
- return new Shape.Edge({
- attrs: {
- line: {
- stroke: '#A2B1C3',
- strokeWidth: 2,
- targetMarker: 'classic'
- }
- },
- labels: [{
- attrs: {
- body: {
- stroke: '#5F95FF',
- },
- text: {
- text: ''
- }
- },
- position: {
- distance: 0.5,
- angle: 180,
- options: {
- keepGradient: true,
- ensureLegibility: true
- }
- }
- }],
- zIndex: 0,
- })
- },
- validateConnection({targetMagnet}) {
- return !!targetMagnet
- },
- },
- highlighting: {
- magnetAdsorbed: {
- name: 'stroke',
- args: {
- attrs: {
- fill: '#5F95FF',
- stroke: '#5F95FF',
- },
- },
- },
- },
- resizing: {
- enabled: true,
- restricted: 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({
- title: '',
- target: this.graph,
- stencilGraphWidth: 230,
- stencilGraphHeight: 300,
- collapsable: false,
- groups: [
- {
- title: '杩愮畻绗﹀彿',
- name: 'group1',
- collapsable: false
- },
- {
- title: '璁惧鑺傜偣',
- name: 'group2',
- collapsable: false
- }
- ],
- layoutOptions: {
- columns: 2,
- columnWidth: 110,
- // rowHeight: 75,
- },
- })
- document.getElementById('stencilImg').appendChild(stencil.container)
-
- Graph.registerNode(
- 'custom-rect',
- {
- inherit: 'rect',
- width: 86,
- height: 26,
- zIndex: 10,
- data: {
- dataId: '',
- finishDate: '',
- inspectName: ''
- },
- attrs: {
- body: {
- strokeWidth: 1,
- stroke: 'none',
- fill: 'none',
- },
- text: {
- // fontFamily: '浠垮畫',
- fontSize: 20,
- fill: '#000',
- },
- label: {
- refX: 0,
- refY: 0.5,
- textAnchor: 'start',
- textVerticalAnchor: 'middle',
- textWrap: {
- text: '鏂囧瓧妯℃澘',
- width: -10, // 瀹藉害鍑忓皯 10px
- ellipsis: false, // 鏂囨湰瓒呭嚭鏄剧ず鑼冨洿鏃讹紝鑷姩娣诲姞鐪佺暐鍙�
- breakWord: true, // 鏄惁鎴柇鍗曡瘝
- }
- },
- },
- ports: {...this.ports},
- },
- true,
- )
-
- Graph.registerNode(
- 'custom-polygon',
- {
- inherit: 'polygon',
- width: 86,
- height: 56,
- attrs: {
- body: {
- strokeWidth: 1,
- stroke: '#5F95FF',
- fill: '#EFF4FF',
- },
- // title:{
- // text:'',
- // refX: 40,
- // refY: 38,
- // fontSize: 20,
- // fill: '#262626',
- // 'text-anchor': 'start',
- // },
- text: {
- // refX: 40,
- // refY: 20,
- fontSize: 20,
- fill: '#262626',
- // 'text-anchor': 'start',
- },
- },
- // markup: [
- // {
- // tagName: 'polygon',
- // selector: 'body',
- // },
- // {
- // tagName: 'text',
- // selector: 'title',
- // },
- // {
- // tagName: 'text',
- // selector: 'text',
- // },
- // ],
- ports: {
- ...this.ports
- // items: [
- // {
- // group: 'top',
- // },
- // {
- // group: 'bottom',
- // },
- // ],
- },
- },
- true,
- )
- //
- Graph.registerNode(
- 'custom-circle',
- {
- inherit: 'ellipse',
- width: 120,
- height: 120,
- data: {
- dataId: '',
- finishDate: ''
- },
- attrs: {
- body: {
- strokeWidth: 1,
- stroke: '#5F95FF',
- fill: '#EFF4FF',
- },
- //鏃ユ湡
- title: {
- text: '',
- fontSize: 12,
- fill: '#262626',
- refX: 0.5,
- refY: '100%',
- refY2: -10,
- textAnchor: 'middle',
- textVerticalAnchor: 'bottom',
- },
- // 鍚嶇О
- text: {
- // fontFamily: '浠垮畫',
- fontSize: 20,
- fill: '#262626',
- textWrap: {
- width: 80, // 瀹藉害涓� 80px鎹㈣
- ellipsis: false, // 鏂囨湰瓒呭嚭鏄剧ず鑼冨洿鏃讹紝鑷姩娣诲姞鐪佺暐鍙�
- breakWord: true, // 鏄惁鎴柇鍗曡瘝
- }
- },
- },
- markup: [
- {
- tagName: 'ellipse',
- selector: 'body',
- },
- {
- tagName: 'text',
- selector: 'title',
- },
- {
- tagName: 'text',
- selector: 'text',
- },
- ],
- ports: {...this.ports},
- },
- true,
- )
- Graph.registerNode(
- 'custom-circle1',
- {
- inherit: 'ellipse',
- width: 65,
- height: 65,
- data: {
- dataId: '',
- finishDate: ''
- },
- attrs: {
- body: {
- strokeWidth: 1,
- stroke: '#5F95FF',
- fill: '#EFF4FF',
- },
- //鏃ユ湡
- text: {
- // fontFamily: '浠垮畫',
- fontSize: 12,
- text: '鏃ユ湡鑺傜偣',
- fill: '#262626',
- },
- },
- ports: {...this.ports},
- },
- true,
- )
- Graph.registerNode(
- 'custom-text',
- {
- inherit: 'text-block',
- width: 86,
- height: 56,
- attrs: {
- body: {
- strokeWidth: 1,
- stroke: '#5F95FF',
- fill: '#EFF4FF',
- },
- text: {
- text: '涓撲笟',
- fontSize: 20,
- style: {
- color: this.globalGridAttr.nodeColor
- },
- refX: '0',
- refY: -0.5,
- refY2: 1,
- textAnchor: 'middle',
- textVerticalAnchor: 'middle',
- },
- },
- markup: [
- {
- tagName: 'rect',
- selector: 'body',
- },
- {
- tagName: 'text',
- selector: 'text',
- },
- ],
- ports: {...this.ports},
- },
- true,
- )
- Graph.registerNode(
- 'rectangle',
- {
- width: 86,
- height: 56,
- attrs: {
- body: {
- fill: '#FFF',
- stroke: '#000',
- strokeWidth: 1,
- },
- icon: {
- class: 'el-icon-refresh', // Element UI鍥炬爣鐨刢lass鍚嶇О
- 'xlink:href': '', // 濡傛灉闇�瑕佷娇鐢⊿VG鍥炬爣锛岃璁剧疆xlink:href灞炴�ф潵寮曞叆SVG鏂囦欢
- refX: '50%',
- refY: '50%',
- yAlignment: 'middle',
- xAlignment: 'middle',
- },
- },
- markup: [
- {
- tagName: 'rect',
- selector: 'body',
- },
- {
- tagName: 'i',
- selector: 'icon',
- },
- ],
- ports: {...this.ports},
- },
- true
- )
- // 涓�绾х綉缁滃浘鐨勬棩鏈熸枃瀛楄妭鐐�
- const r5 = this.graph.createNode({
- shape: 'custom-circle',
- data: {
- dataId: '',
- finishDate: '',
- inspectName: ''
- },
- label: '闃舵',
- })
-
- // 浜岀骇缃戠粶鍥炬棩鏈熻妭鐐�
- const r6 = this.graph.createNode({
- shape: 'custom-circle1',
- data: {
- dataId: '',
- finishDate: '',
- inspectName: ''
- },
- })
- // 浜岀骇缃戠粶鍥炬枃瀛楄妭鐐�
- const r9 = this.graph.createNode({
- shape: 'custom-rect'
- })
- const imageNodes = this.imgsList.map((item) =>
- this.graph.createNode({
- shape: 'image',
- imageUrl: require('/public/modelImg/'+item.imgPath+'.png'),
- width: item.imgWidth,
- height: item.imgHeight,
- x: item.imgWidth,
- y: item.imgHeight,
- data: {
- dataId: '',
- nodeType: item.nodeType,
- nodeTypeExt: ''
- },
- attrs: {
- 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},
- }),
- )
- const imageNodes2 = this.imgsList2.map((item) =>
- this.graph.createNode({
- shape: 'image',
- imageUrl: require('/public/modelImg/'+item.imgPath+'.png'),
- width:item.imgWidth,
- height:item.imgHeight,
- x:item.imgWidth,
- y:item.imgHeight,
- data: {
- dataId: item.data.dataId,
- nodeType: item.nodeType,
- nodeTypeExt: item.data.nodeTypeExt
- },
- attrs: {
- 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},
- }),
- )
- // r1.push(r5,r6,r9)
- console.log(imageNodes,'group1')
- 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
- })
-
- 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
- })
-
-// select all
- this.graph.bindKey(['meta+a', 'ctrl+a'], () => {
- const nodes = this.graph.getNodes()
- if (nodes) {
- this.graph.select(nodes)
- }
- })
-//delete
- this.graph.bindKey('delete', () => {
- const cells = this.graph.getSelectedCells()
- if (cells.length) {
- this.$confirm('鏄惁鍒犻櫎璇ヨ妭鐐�?', '鎻愮ず', {
- confirmButtonText: '纭畾',
- cancelButtonText: '鍙栨秷',
- type: 'warning'
- }).then(() => {
- this.$message({
- type: 'success',
- message: '鍒犻櫎鎴愬姛!'
- })
- this.graph.removeCells(cells)
- }).catch(() => {
- this.$message({
- type: 'info',
- message: '宸插彇娑堝垹闄�'
- })
- })
- }
- })
-// 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('cell:click', ({cell}) => {
- // this.type.value = cell.isNode() ? "node" : "edge"
- this.type = cell.isNode() ? 'node' : 'edge'
- this.shape = cell.shape
- this.id = cell.id
- 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.reset()
- node.attr('line/stroke', 'orange')
- node.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,
+ connector: {
+ name: 'rounded',
args: {
- event: e,
+ radius: 5,
+ },
+ },
+ anchor: 'center',
+ connectionPoint: 'anchor',
+ allowBlank: false,
+ snap: {
+ radius: 20,
+ },
+ createEdge() {
+ return new Shape.Edge({
attrs: {
- backgroundColor: isNode ? '#EFF4FF' : '#FFF',
- text: {
- fontSize: 16,
- fill: '#262626',
- },
+ line: {
+ stroke: '#A2B1C3',
+ strokeWidth: 2,
+ targetMarker: 'classic'
+ }
},
- },
- })
- })
-
- 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, view}) => {
- // alert(123)
- cell.addTools([
- {
- name: 'source-arrowhead',
- },
- {
- name: 'target-arrowhead',
- args: {
+ labels: [{
attrs: {
- fill: 'red',
+ body: {
+ stroke: '#5F95FF',
+ },
+ text: {
+ text: ''
+ }
+ },
+ position: {
+ distance: 0.5,
+ angle: 180,
+ options: {
+ keepGradient: true,
+ ensureLegibility: true
+ }
+ }
+ }],
+ tools: {
+ name: 'segments',
+ args: {
+ attrs: {fill: '#666'},
},
},
- },
- ])
- cell.addTools(
- [
- {
- name: 'segments',
- args: {snapRadius: 20, attrs: {fill: '#444'}}
- }
- ]
- )
- })
-
- this.graph.on('edge:mouseleave', ({cell}) => {
- cell.removeTools()
- })
- },
- 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: {
+ zIndex: 0,
+ })
+ },
+ validateConnection({targetMagnet}) {
+ return !!targetMagnet
+ },
+ },
+ highlighting: {
+ magnetAdsorbed: {
+ name: 'stroke',
+ args: {
+ attrs: {
+ fill: '#5F95FF',
stroke: '#5F95FF',
},
},
- })
- })
- },
- // nodeOpt(id, globalGridAttr) {
- // this.curCel = null
- // if (id) {
- // let cell = this.graph.getCellById(id)
- // console.log(cell, 'let cell 123456')
- // if (!cell || !cell.isNode()) {
- // return
- // }
- // this.curCel = cell
- // globalGridAttr.nodeStroke = cell.attr('body/stroke')
- // globalGridAttr.nodeStrokeWidth = cell.attr('body/strokeWidth')
- // globalGridAttr.nodeFill = cell.attr('body/fill')
- // globalGridAttr.nodeFontSize = cell.attr('text/fontSize')
- // globalGridAttr.nodeFontSize = cell.attr('title/fontSize')
- // globalGridAttr.nodeColor = cell.attr('text/fill')
- // globalGridAttr.nodeColor = cell.attr('title/fill')
- // globalGridAttr.nodeColor = cell.attr('text/style/color')
- // globalGridAttr.nodeColor = cell.attr('title/style/color')
- // globalGridAttr.nodeUsers = cell.attr('approve/users')
- // globalGridAttr.nodeText = cell.attr('text/text')
- // globalGridAttr.nodeDate = cell.attr('title/text')
- // // let data={
- // // dataId:this.projectId,
- // // finishDate: globalGridAttr.nodeDate,
- // // }
- // cell.getData()
- // console.log( cell.getData(),' cell.getData() 909')
- // }
- // return this.curCel;
- // },
- async saveDiagram() {
- console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
- this.dataForm.content = JSON.stringify(this.graph.toJSON())
- 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: '纭畾'
+ },
+ },
+ 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; // 鍙栨秷娣诲姞鑺傜偣鎿嶄綔
+ }
+ }
+ },
+ title: '',
+ target: this.graph,
+ stencilGraphWidth: 200,
+ stencilGraphHeight: 280,
+ collapsable: true,
+ groups: [
+ {
+ title: '杩愮畻绗﹀彿',
+ name: 'group1',
+ },
+ {
+ title: '缁勫悎鍥�',
+ name: 'combiningImages',
+ graphHeight: 100,
+ },
+ {
+ title: '璁惧鑺傜偣',
+ name: 'group2',
+ graphHeight: '',
+ layoutOptions: {
+ rowHeight: 90,
+ },
+ }
+ ],
+ layoutOptions: {
+ columns: 2,
+ columnWidth: 105,
+ },
+ })
+ document.getElementById('stencilImg').appendChild(stencil.container)
+ const imageNodes = this.imgsList.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},
+ }),
+ )
+ const combiningImages = this.combiningImages.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}`,
+ width: 60,
+ height: 60,
+ 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,
+ taskMtbcf: item.taskMtbcf,
+ taskMtbcfOther: item.taskMtbcfOther,
+ imgHeight: item.imgHeight,
+ imgWidth: item.imgWidth,
+ voteNum: '',
+ },
+ attrs: {
+ text: {
+ text: item.imgName,
+ fontSize: 14,
+ style: {
+ color: this.globalGridAttr.nodeColor
+ },
+ refX: 0.5,
+ refY: '100%',
+ refY2: 4,
+ textAnchor: 'middle',
+ textVerticalAnchor: 'top',
+ },
+ },
+ 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')
+
+ 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
+ })
+
+// select all
+ this.graph.bindKey(['meta+a', 'ctrl+a'], () => {
+ const nodes = this.graph.getNodes()
+ if (nodes) {
+ this.graph.select(nodes)
+ }
+ })
+//delete
+ this.graph.bindKey('delete', () => {
+ const cells = this.graph.getSelectedCells()
+ if (cells.length) {
+ this.$confirm('鏄惁鍒犻櫎璇ヨ妭鐐�?', '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
+ }).then(() => {
+ this.$message({
+ type: 'success',
+ message: '鍒犻櫎鎴愬姛!'
})
+ this.graph.removeCells(cells)
+ }).catch(() => {
+ this.$message({
+ type: 'info',
+ message: '宸插彇娑堝垹闄�'
+ })
+ })
+ }
+ })
+// 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}) => {
+ const nodeId = node.id; // 鑾峰彇鑺傜偣鐨勫敮涓� ID
+ const nodeObj = node
+ const intersectNodes = [];
+ // 妫�鏌ラ櫎褰撳墠鑺傜偣涔嬪鐨勬墍鏈夎妭鐐圭殑鍖呭洿妗嗘槸鍚︾浉浜�
+ for (const otherNode of this.graph.getNodes()) {
+ if (otherNode === node) continue;
+ const bbox1 = node.getBBox();
+ const bbox2 = otherNode.getBBox();
+ if (this.isIntersect(bbox1, bbox2)) {
+ 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);
+ })
+ }
+ });
+ 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')
+ }
+ 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',
+ },
+ },
+
})
- },
- // AlignmentsChanges(val){
- // console.log(val,'align.value')
- // if(val ==='閫夐」1'){
- // console.log(val,'align.value')
- // this.leftAlign()
- // }
- // if(val ==='閫夐」2') {
- // console.log('鍙冲榻�','align.value')
- // this.rightAlign()
- // }
- // },
- 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
- }
- }
+ })
+ // 鍗曞嚮node鑺傜偣
+ this.graph.on('node:click', ({node}) => {
+ })
+ // 鎺у埗杩炴帴妗╂樉绀�/闅愯棌
+ this.graph.on('node:delete', ({view, e}) => {
+ e.stopPropagation()
+ view.cell.remove()
+ })
- let centerX = leftX + (rightX - leftX) / 2
+ 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',
+ },
+ },
+ },
+ })
+ })
- 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
- }
- }
+ this.graph.on('node:mouseenter', ({node}) => {
+ const container = document.getElementById('containerImg')
+ const ports = container.querySelectorAll(
+ '.x6-port-body',
+ )
+ this.showPorts(ports, true)
+ })
- 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
- }
- }
+ 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)
+ })
- 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)
- }
- },
+ 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 ;
+ height: 400px;
width: 100% !important;
}
@@ -1347,9 +1212,17 @@
height: 100%;
}
+#stencilImg .x6-graph-svg-viewport {
+ height: 100%;
+}
+
.x6-widget-stencil-content {
position: relative;
- height: 100%;
+ height: calc(100% - 32px);
+}
+
+#stencilImg .x6-widget-stencil.collapsable > .x6-widget-stencil-content {
+ top: 0
}
</style>
--
Gitblit v1.9.1