From 812d77e3db062d63bc35304ac527f14efd1a454d Mon Sep 17 00:00:00 2001
From: jinlin <jinlin>
Date: 星期一, 18 三月 2024 11:12:18 +0800
Subject: [PATCH] 修改
---
web/src/views/modules/taskReliability/RBD-edit-img.vue | 724 ++++++++++++++++++-------------------------------------
1 files changed, 241 insertions(+), 483 deletions(-)
diff --git a/web/src/views/modules/taskReliability/RBD-edit-img.vue b/web/src/views/modules/taskReliability/RBD-edit-img.vue
index 0665c19..5b240b8 100644
--- a/web/src/views/modules/taskReliability/RBD-edit-img.vue
+++ b/web/src/views/modules/taskReliability/RBD-edit-img.vue
@@ -14,52 +14,52 @@
<el-form-item>
妯″瀷鍚嶇О锛歿{modelName}}
</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="clearDiagram()">娓呯┖鍥惧舰</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-button type="primary" @click="saveDiagram()">鏆傚瓨</el-button>
+ <el-button type="primary" @click="analyzeDiagram()">淇濆瓨</el-button>
+ <el-button type="primary" @click="clearDiagram()">娓呯┖鍥惧舰</el-button>
</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-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="rightAlign()"><i style="font-size: 2rem;"
- class="wt-iconfont icon-youduiqi"></i></el-button>
- </el-tooltip>
+ <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="topAlign()"><i style="font-size: 2rem;"
- class="wt-iconfont icon-dingduiqi"></i></el-button>
- </el-tooltip>
+ <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="shuipingAlign()"><i style="font-size: 2rem;"
- class="wt-iconfont icon-shuipingduiqi"></i></el-button>
- </el-tooltip>
+ <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="bottomAlign()"><i style="font-size: 2rem;"
- class="wt-iconfont icon-diduiqi"></i></el-button>
- </el-tooltip>
+ <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-form-item>
</el-form>
<div id="containerImg" style="border: 1px solid #EAEBEE;border-radius: 6px;
@@ -83,6 +83,7 @@
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',
@@ -112,21 +113,37 @@
return {
modelId: '',
modelName: '',
- modelType:'',
+ 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:20,imgHeight:20,imgId:'3',data:{}},
+ 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: 20,
+ imgHeight: 20,
+ imgId: '3',
+ data: {}
+ },
// {imgPath:'parallelLeft',imgName:'parallelLeft',nodeType:'parallelLeft',imgWidth:60,imgHeight:60,imgId:'3',data:{}},
// {imgPath:'parallelRight',imgName:'parallel',nodeType:'parallel',imgWidth:60,imgHeight:60,imgId:'4',data:{}},
- {imgPath:'switchRight',imgName:'switch',nodeType:'switch',imgWidth:60,imgHeight:60,imgId:'5',data:{}},
- {imgPath:'voteRight',imgName:'vote',nodeType:'vote',imgWidth:60,imgHeight:60,imgId:'6',data:{}},
+ {
+ imgPath: 'switchRight',
+ imgName: 'switch',
+ nodeType: 'switch',
+ imgWidth: 60,
+ imgHeight: 60,
+ imgId: '5',
+ data: {}
+ },
+ {imgPath: 'voteRight', 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'},
+ imgsList2: [
+ // {imgPath:'logo',imgName:'logo',nodeType:'node',,nodeTypeExt:'',productType:'',statusImg:'',imgWidth:60,imgHeight:60,imgId:'100',dataId:'123456'},
],
- nodeType:'',
+ nodeType: '',
first: true,
shape: '',
projectList: [],
@@ -167,8 +184,17 @@
id: '',
graph: null,
globalGridAttr: {
- statusImg:'',
- nodeTypeExt:'',
+ voteNum: '',
+ repairMttcr: '',
+ repairMttcrOther: '',
+ repairDistribType: '',
+ reliabDistribType: '',
+ taskMtbcfOther: '',
+ isRepair: 0,
+ taskMtbcf: '',
+ numberInputValue: '',
+ statusImg: '',
+ nodeTypeExt: '',
type: 'mesh',
size: 10,
color: '#e5e5e5',
@@ -204,7 +230,7 @@
},
isReady: false,
curCel: Cell,
- left_p: document.documentElement.clientHeight-100,
+ left_p: document.documentElement.clientHeight - 100,
ports: {
groups: {
top: {
@@ -299,32 +325,32 @@
this.type = 'grid'
},
methods: {
- init(row){
+ 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){')
+ console.log(this.dataForm, 'init(row){')
},
async getDiagram(modelId) {
let params = {
- modelId : modelId
+ modelId: modelId
}
- let res = await this.$http.get(`/taskReliability/ModelLine/getDiagram`, {params: params})
- console.log(res,'async getDiagram( res')
+ 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')
- 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 {
- await this.clearDiagram()
- }
+ this.dataForm = res.data
+ console.log(this.dataForm, 'this.dataForm in getDiagram')
+ 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 {
+ await this.clearDiagram()
+ }
},
async clearDiagram() {
this.dataForm.id = null
@@ -335,8 +361,6 @@
// 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')
@@ -348,15 +372,16 @@
grid: {
visible: true,
},
- onToolItemCreated({tool}) {
- const handle = tool
- const options = handle.options
- if (options && options.index % 2 === 1) {
- tool.setAttrs({fill: 'red'})
- }
- },
autoResize: true,
- history: true,
+ history: {
+ enabled: true,
+ beforeAddCommand(event, args) {
+ if (args.key==='tools') {
+ console.log(args.key,'event, args')
+ return false
+ }
+ },
+ },
// panning: {
// enabled: true,
// },
@@ -365,8 +390,8 @@
pageVisible: true,
pageBreak: true,
pannable: true,
- minVisibleWidth:200,
- minVisibleHeight:200,
+ minVisibleWidth: 200,
+ minVisibleHeight: 200,
modifiers: 'shift',
},
// panning: {
@@ -426,6 +451,12 @@
}
}
}],
+ tools: {
+ name: 'vertices',
+ args: {
+ attrs: { fill: '#666' },
+ },
+ },
zIndex: 0,
})
},
@@ -461,399 +492,139 @@
})
this.graph.centerContent()
const stencil = new Addon.Stencil({
+ getDropNode(node) {
+ let {width, height} = node.size()
+ if (node.getData().imgWidth) {
+ width = node.getData().imgWidth
+ }
+ if (node.getData().imgHeight) {
+ height = node.getData().imgHeight
+ }
+ console.log(node.getData().imgWidth, node.getData().imgHeight, 'node.size()')
+ return node.clone().size(width, height)
+ },
title: '',
target: this.graph,
- stencilGraphWidth: 230,
- stencilGraphHeight: 300,
- collapsable: false,
+ stencilGraphWidth: 200,
+ stencilGraphHeight: 280,
+ collapsable: true,
groups: [
{
title: '杩愮畻绗﹀彿',
name: 'group1',
- collapsable: false
},
{
title: '璁惧鑺傜偣',
name: 'group2',
- collapsable: false
+ graphHeight: '',
+ layoutOptions: {
+ rowHeight: 90,
+ },
}
],
layoutOptions: {
columns: 2,
- columnWidth: 110,
- // rowHeight: 75,
+ columnWidth: 105,
},
})
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',
+ 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: '',
+ voteNum:''
+ },
+ 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},
- }),
+ },
+ ports: {...this.ports},
+ }),
)
let params = {
- productId : productId
+ productId: productId
}
let res = await this.$http.get(`/basicInfo/XhProductModel/getProduct`, {params: params})
this.imgsList2 = res.data
- console.log(this.imgsList2 ,'getProduct(productId)234567890')
+ console.log(this.imgsList2, 'getProduct(productId)234567890')
const imageNodes2 = this.imgsList2.map((item) =>
- this.graph.createNode({
- shape: 'image',
- imageUrl: `${window.SITE_CONFIG['apiURL']}/sys/oss/content2?fileId=${item.imgPath}`,
- width:item.imgWidth,
- height:item.imgHeight,
- x:item.imgWidth,
- y:item.imgHeight,
- data: {
- dataId: item.dataId,
- nodeType: item.nodeType,
- nodeTypeExt: item.nodeTypeExt,
- productType: item.productType,
- statusImg:item.statusImg
- },
- attrs: {
- text:{
- text: item.imgName,
- fontSize: 14,
- style: {
- color: this.globalGridAttr.nodeColor
- },
- refX: 0.5,
- refY: '100%',
- refY2: 4,
- textAnchor: 'middle',
- textVerticalAnchor: 'top',
+ this.graph.createNode({
+ shape: 'image',
+ imageUrl: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=${item.imgPath}`,
+ width: 60,
+ height: 60,
+ data: {
+ 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
- }
+ },
+ 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},
- }),
+ }
+ ],
+ ports: {...this.ports},
+ }),
)
stencil.load(imageNodes, 'group1')
stencil.load(imageNodes2, 'group2')
@@ -953,7 +724,7 @@
this.type = cell.isNode() ? 'node' : 'edge'
this.shape = cell.shape
this.id = cell.id
- if(this.type==='node'){
+ if (this.type === 'node') {
this.nodeType = cell.getData().nodeType
console.log(this.nodeType, 'this.nodeType')
}
@@ -1036,28 +807,10 @@
this.showPorts(ports, false)
})
- this.graph.on('edge:mouseenter', ({cell, view}) => {
+ this.graph.on('edge:mouseenter', ({cell}) => {
// alert(123)
- cell.addTools([
- {
- name: 'source-arrowhead',
- },
- {
- name: 'target-arrowhead',
- args: {
- attrs: {
- fill: 'red',
- },
- },
- },
- ])
cell.addTools(
- [
- {
- name: 'segments',
- args: {snapRadius: 20, attrs: {fill: '#444'}}
- }
- ]
+ ['vertices', 'segments']
)
})
@@ -1260,7 +1013,7 @@
}
},
close() {
- if (this.timer){
+ if (this.timer) {
window.clearInterval(this.timer)
}
},
@@ -1270,32 +1023,37 @@
</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%;
}
-
-.x6-widget-stencil-content {
- position: relative;
- height: 100%;
+ .x6-widget-stencil-content {
+ position: relative;
+ height: calc(100% - 32px);
}
+#stencilImg .x6-widget-stencil.collapsable > .x6-widget-stencil-content{
+ top:0
+ }
</style>
--
Gitblit v1.9.1