From a7892d2ab77735063408c24be9bddfba01740e1d Mon Sep 17 00:00:00 2001
From: wente <329538422@qq.com>
Date: 星期四, 31 十月 2024 14:46:26 +0800
Subject: [PATCH] 时序图模板修改
---
web/src/views/modules/taskReliability/ConfigNode/tempNode.vue | 114 +++++--------
web/src/views/modules/taskReliability/ConfigEdge/configEdge.vue | 73 +++-----
web/src/views/modules/taskReliability/TimeDiagramTemp.vue | 58 +++---
web/src/views/modules/taskReliability/TimeDiagram.vue | 210 --------------------------
4 files changed, 102 insertions(+), 353 deletions(-)
diff --git a/web/src/views/modules/taskReliability/ConfigEdge/configEdge.vue b/web/src/views/modules/taskReliability/ConfigEdge/configEdge.vue
index 680a165..821d0f4 100644
--- a/web/src/views/modules/taskReliability/ConfigEdge/configEdge.vue
+++ b/web/src/views/modules/taskReliability/ConfigEdge/configEdge.vue
@@ -6,7 +6,7 @@
<el-row :gutter="5" align="middle" style="margin-top:20px;">
<el-col :span=8 style="font-size: 16px;line-height: 38px">瀹藉害</el-col>
<el-col :span=16>
- <el-slider :min=1 :max=20 :step=1 v-model="globalGridAttr.strokeWidth" @change="onStrokeWidthChange"></el-slider>
+ <el-slider :min=1 :max=20 :step=1 v-model="globalGridAttr.nodeStrokeWidth" @change="onStrokeWidthChange"></el-slider>
</el-col>
</el-row>
<el-row :gutter="5" align="middle" style="margin-top:20px;">
@@ -65,7 +65,13 @@
return{
left_p:document.documentElement.clientHeight*0.9,
activeName: 'first',
- // globalGridAttr:{},
+ globalGridAttr:{
+ nodeStrokeWidth:1,
+ stroke:'',
+ connector:'',
+ label:'',
+ distance:''
+ },
curCell:Edge,
options: [{
value: 'rounded',
@@ -80,38 +86,14 @@
id: {
type: String,
},
- globalGridAttr:{
- type: Object,
- },
graph:{
type: String,
}
},
- watch:{
- 'id'(val,oldVal){
- const cell = this.graph.getCellById(this.id)
- if(!cell || !cell.isEdge()){
- return
- }
- this.curCell = cell
- let connector = cell.getConnector() || {
- name:'榛樿'
- }
- this.globalGridAttr.stroke = cell.attr('line/stroke')
- this.globalGridAttr.strokeWidth = cell.attr('line/strokeWidth')
- this.globalGridAttr.connector = connector.name
- this.globalGridAttr.label = cell.getLabels()[0].attrs.text? cell.getLabels()[0].attrs.text.text:''
- this.globalGridAttr.distance =cell.getLabels()[0].position.distance
- // this.globalGridAttr.angle =cell.getLabels()[0].position.angle
- console.log(cell.getLabels(),'cell.getLabels()')
- // console.log(cell.getLabels()[0],'cell.getLabels()[0]')
- // this.globalGridAttr.label = (cell.getLabels()[0].attrs).text.text||''
- }
- },
methods:{
onStrokeWidthChange(val) {
-
- this.globalGridAttr.strokeWidth = val
+ console.log(val,'val')
+ this.globalGridAttr.nodeStrokeWidth = val
this.curCell.attr('line/strokeWidth', val)
},
@@ -174,25 +156,22 @@
}
])
},
- // onLabelAngleChange(e){
- // const val = e
- // // this.globalGridAttr.angle = val
- // this.curCell.setLabels([
- // {
- // attrs: {
- // text: {
- // text: this.globalGridAttr.label,
- // },
- // },
- // position: {
- // distance:this.globalGridAttr.distance,
- // options: {
- // keepGradient: true
- // }
- // },
- // }
- // ])
- // }
+ loadData(cell){
+ this.curCell = cell
+ let connector = cell.getConnector() || {
+ name:'榛樿'
+ }
+ this.globalGridAttr.stroke = cell.attr('line/stroke')
+ this.globalGridAttr.nodeStrokeWidth = cell.attr('line/strokeWidth')
+ this.globalGridAttr.connector = connector.name
+ this.globalGridAttr.label = cell.getLabels()[0].attrs.text? cell.getLabels()[0].attrs.text.text:''
+ this.globalGridAttr.distance =cell.getLabels()[0].position.distance
+ // this.globalGridAttr.angle =cell.getLabels()[0].position.angle
+ console.log(this.globalGridAttr.nodeStrokeWidth,cell.attr('line/strokeWidth'),'globalGridAttr.nodeStrokeWidth')
+ console.log(this.globalGridAttr,'this.globalGridAttr')
+ // console.log(cell.getLabels()[0],'cell.getLabels()[0]')
+ // this.globalGridAttr.label = (cell.getLabels()[0].attrs).text.text||''
+ }
}
}
</script>
diff --git a/web/src/views/modules/taskReliability/ConfigNode/tempNode.vue b/web/src/views/modules/taskReliability/ConfigNode/tempNode.vue
index 10e887b..98026fa 100644
--- a/web/src/views/modules/taskReliability/ConfigNode/tempNode.vue
+++ b/web/src/views/modules/taskReliability/ConfigNode/tempNode.vue
@@ -6,31 +6,31 @@
<el-row :gutter="5" align="middle" style="margin-top:20px">
<el-col :span=8 style="font-size: 16px;line-height: 38px">鏂囨湰澶у皬</el-col>
<el-col :span=16>
- <el-slider :min=8 :max=20 :step=1 v-model="globalGridAttr.nodeFontSize" @change="onFontSizeChange"></el-slider>
+ <el-slider :min=8 :max=20 :step=1 v-model="tempNodeAttr.nodeFontSize" @change="onFontSizeChange"></el-slider>
</el-col>
</el-row>
<el-row :gutter="5" align="middle" style="margin-top:20px">
<el-col :span=8 style="font-size: 16px;line-height: 40px">瀛椾綋棰滆壊</el-col>
<el-col :span=16>
- <el-color-picker v-model="globalGridAttr.nodeColor" style="width: 100%" @change="onColorChange"></el-color-picker>
+ <el-color-picker v-model="tempNodeAttr.nodeColor" style="width: 100%" @change="onColorChange"></el-color-picker>
</el-col>
</el-row>
<el-row v-show="shape!=='custom-text' || shape!=='custom-circle1'" :gutter="5" align="middle" style="margin-top:20px">
<el-col :span=8 style="font-size: 16px;line-height: 32px">椤圭洰鍚嶇О</el-col>
<el-col :span=16 >
- <el-input @click.native='showDialog' v-model="globalGridAttr.inspectName" style="width:100%"></el-input>
+ <el-input @click.native='showDialog' v-model="tempNodeAttr.inspectName" style="width:100%"></el-input>
</el-col>
</el-row>
<el-row :gutter="5" v-show="shape!=='custom-circle1'" align="middle" style="margin-top:20px">
<el-col :span=8 style="font-size: 16px;line-height: 32px">杩囩▼鍚嶇О</el-col>
<el-col :span=16 >
- <el-input v-model="globalGridAttr.nodeText" style="width:100%" @change="onTextChange"></el-input>
+ <el-input v-model="tempNodeAttr.nodeText" style="width:100%" @change="onTextChange"></el-input>
</el-col>
</el-row>
<el-row v-show="shape!=='custom-text'" :gutter="5" align="middle" style="margin-top:20px">
<el-col :span=8 style="font-size: 16px;line-height: 32px">鏃ユ湡</el-col>
<el-col :span=16 >
- <el-date-picker v-model="globalGridAttr.nodeDate" type="date" placeholder="閫夋嫨鏃ユ湡" value-format="yyyy-MM-dd"
+ <el-date-picker v-model="tempNodeAttr.nodeDate" type="date" placeholder="閫夋嫨鏃ユ湡" value-format="yyyy-MM-dd"
style="width: 100%" @change="onDateChange">
</el-date-picker>
</el-col>
@@ -40,19 +40,19 @@
<el-row align="middle" style="margin-top:20px">
<el-col :span=8 style="font-size: 16px;line-height: 40px">杈规棰滆壊</el-col>
<el-col :span=16>
- <el-color-picker v-model="globalGridAttr.nodeStroke" style="width: 100%" @change="onStrokeChange"></el-color-picker>
+ <el-color-picker v-model="tempNodeAttr.nodeStroke" style="width: 100%" @change="onStrokeChange"></el-color-picker>
</el-col>
</el-row>
<el-row align="middle"style="margin-top:20px">
<el-col :span=8 style="font-size: 16px;line-height: 38px">杈规瀹藉害</el-col>
<el-col :span=16>
- <el-slider :min=1 :max=20 :step=1 v-model="globalGridAttr.nodeStrokeWidth" @change="onStrokeWidthChange"></el-slider>
+ <el-slider :min=1 :max=20 :step=1 v-model="tempNodeAttr.nodeStrokeWidth" @change="onStrokeWidthChange"></el-slider>
</el-col>
</el-row>
<el-row align="middle" style="margin-top:20px">
<el-col :span=8 style="font-size: 16px;line-height: 40px">棰滆壊</el-col>
<el-col :span=16>
- <el-color-picker v-model="globalGridAttr.nodeFill" style="width: 100%" @change="onFillChange"></el-color-picker>
+ <el-color-picker v-model="tempNodeAttr.nodeFill" style="width: 100%" @change="onFillChange"></el-color-picker>
</el-col>
</el-row>
</el-tab-pane>
@@ -83,7 +83,16 @@
content:'',
dialogVisible:false,
activeName: 'first',
- // globalGridAttr:{},
+ tempNodeAttr:{
+ nodeFontSize:'',
+ nodeColor:'',
+ inspectName:'',
+ nodeText:'',
+ nodeDate:'',
+ nodeStroke:'',
+ nodeStrokeWidth:'',
+ nodeFill:'',
+ },
curCel:Cell,
left_p:document.documentElement.clientHeight*0.9,
}
@@ -101,9 +110,6 @@
refY2:{
type: Number
},
- globalGridAttr:{
- type: Object,
- },
graph:{
type: String,
},
@@ -113,14 +119,6 @@
diagramId:{
type: String,
}
- },
- watch:{
- 'id'(val,oldVal){
- this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
- }
- },
- mounted() {
- // this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
},
methods:{
showDialog() {
@@ -135,9 +133,9 @@
// console.log(node,'node')
this.text =node.nodeName
this.dateId = node.nodeId
- this.globalGridAttr.dataId = this.dateId
- this.globalGridAttr.inspectName = this.text
- this.globalGridAttr.nodeText = this.text
+ this.tempNodeAttr.dataId = this.dateId
+ this.tempNodeAttr.inspectName = this.text
+ this.tempNodeAttr.nodeText = this.text
this.data={
dataId:this.dateId,
inspectName:this.text
@@ -146,56 +144,56 @@
this.curCel.attr('text/text', this.text)
this.curCel.attr('data/dataId', this.dateId)
this.curCel.attr('data/inspectName', this.text)
- this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
+ // this.curCel = this.nodeOpt(this.id,this.tempNodeAttr)
this.dialogVisible = false
// console.log(node,'dialog绐楀彛杩斿洖鍊�')
},
// 鏀瑰彉杈规棰滆壊
onStrokeChange(e){
let val = e
- this.globalGridAttr.nodeStroke = val
+ this.tempNodeAttr.nodeStroke = val
this.curCel.attr('body/stroke', val)
},
//鏀瑰彉杈规澶у皬
onStrokeWidthChange(e){
let val =e
- this.globalGridAttr.nodeStrokeWidth = val
+ this.tempNodeAttr.nodeStrokeWidth = val
this.curCel.attr('body/strokeWidth', val)
},
//鏀瑰彉鏂囨湰棰滆壊
onFillChange(e){
let val = e
- this.globalGridAttr.nodeFill=val
+ this.tempNodeAttr.nodeFill=val
this.curCel.attr('body/fill', val)
// this.curCel.attr('title/fill', val)
},
// 鏀瑰彉瀛椾綋澶у皬
onFontSizeChange(e){
let val =e
- this.globalGridAttr.nodeFontSize = val
+ this.tempNodeAttr.nodeFontSize = val
this.curCel.attr('text/fontSize', val)
this.curCel.attr('title/fontSize', val)
},
// 鏀瑰彉瀛椾綋棰滆壊
onColorChange(e){
let val =e
- this.globalGridAttr.nodeColor = val
+ this.tempNodeAttr.nodeColor = val
this.curCel.attr('text/fill', val)
this.curCel.attr('title/fill', val)
this.curCel.attr('text/style/color', val)
this.curCel.attr('title/style/color', val)
- this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
+ // this.curCel = this.nodeOpt(this.id,this.tempNodeAttr)
},
// 鏀瑰彉鏂囨湰
onTextChange(e){
this.text =e
- this.globalGridAttr.nodeText = this.text
+ this.tempNodeAttr.nodeText = this.text
this.curCel.attr('label/textWrap/text', this.text)
- this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
+ // this.curCel = this.nodeOpt(this.id,this.tempNodeAttr)
},
onDateChange(e){
this.date =e
- this.globalGridAttr.nodeDate = this.date
+ this.tempNodeAttr.nodeDate = this.date
this.data={
finishDate:this.date,
}
@@ -204,42 +202,24 @@
this.curCel.attr('text/text', this.date)
}
this.curCel.attr('title/text', this.date)
- this.curCel = this.nodeOpt(this.id,this.globalGridAttr)
+ // this.curCel = this.nodeOpt(this.id,this.tempNodeAttr)
},
- 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.nodeFontSize = cell.attr('text/fontSize')?cell.attr('text/fontSize'):cell.attr('title/fontSize')
- globalGridAttr.nodeColor = cell.attr('text/fill') ? cell.attr('text/fill'):cell.attr('title/fill')?cell.attr('title/fill'):cell.attr('label/text/fill')
- // 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('label/textWrap/text')
- console.log(globalGridAttr.nodeText,'globalGridAttr.nodeText')
- if(this.shape=='custom-circle1'){
- globalGridAttr.nodeDate = cell.attr('text/text')
- }
- globalGridAttr.nodeDate = cell.attr('title/text')
- globalGridAttr.dataId = cell.getData().dataId
- globalGridAttr.inspectName =cell.getData().inspectName
- // console.log(globalGridAttr.inspectName,globalGridAttr.dataId,globalGridAttr.nodeDate,'globalGridAttr.inspectName,globalGridAttr.dataId,globalGridAttr.nodeDate 789')
- cell.getData()
- // console.log( cell.getData(),' cell.getData() 909')
+ loadData(cell){
+ this.curCel=cell
+ this.tempNodeAttr.nodeStroke = cell.attr('body/stroke')
+ this.tempNodeAttr.nodeStrokeWidth = cell.attr('body/strokeWidth')
+ this.tempNodeAttr.nodeFill = cell.attr('body/fill')
+ this.tempNodeAttr.nodeFontSize = cell.attr('text/fontSize')?cell.attr('text/fontSize'):cell.attr('title/fontSize')
+ this.tempNodeAttr.nodeColor = cell.attr('text/fill') ? cell.attr('text/fill'):cell.attr('title/fill')?cell.attr('title/fill'):cell.attr('label/text/fill')
+ this.tempNodeAttr.nodeUsers = cell.attr('approve/users')
+ this.tempNodeAttr.nodeText = cell.attr('label/textWrap/text')
+ console.log(this.tempNodeAttr.nodeText,'tempNodeAttr.nodeText')
+ if(this.shape=='custom-circle1'){
+ this.tempNodeAttr.nodeDate = cell.attr('text/text')
}
- return this.curCel;
+ this.tempNodeAttr.nodeDate = cell.attr('title/text')
+ this.tempNodeAttr.dataId = cell.getData().dataId
+ this.tempNodeAttr.inspectName =cell.getData().inspectName
}
}
}
diff --git a/web/src/views/modules/taskReliability/TimeDiagram.vue b/web/src/views/modules/taskReliability/TimeDiagram.vue
index 4001449..cf48ad0 100644
--- a/web/src/views/modules/taskReliability/TimeDiagram.vue
+++ b/web/src/views/modules/taskReliability/TimeDiagram.vue
@@ -23,8 +23,6 @@
</zt-form-item>
<zt-form-item>
<zt-button @click="getDiagram(null)">鏌ョ湅鏃跺簭鍥�</zt-button>
-<!-- <zt-button @click="graphRightTranslate()">鐢诲竷鍙崇Щ</zt-button>-->
-<!-- <zt-button @click="graphLeftTranslate()">鐢诲竷宸︾Щ</zt-button>-->
</zt-form-item>
</el-form>
<div style="display: flex">
@@ -141,7 +139,6 @@
window.removeEventListener('scroll', this.handleScroll,true);
},
mounted() {
- // alert(`mounted鎵ц浜哷)
this.getProductList()
this.init()
this.$refs.textDiagram.init()
@@ -158,7 +155,6 @@
handleScroll(){
this.graph.getScrollbarPosition()
let left = this.graph.getScrollbarPosition().left
- console.log(left,'left left')
let top = this.graph.getScrollbarPosition().top
this.$refs.textDiagram.setScroll(top)
this.$refs.timeDiagramThumbnail.getNodePointX(left,this.bigWidth)
@@ -205,20 +201,6 @@
minVisibleHeight:300,
pannable: true,
},
- // minimap: {
- // enabled: true,
- // container: document.getElementById('thumbnail'),
- // scalable:false,
- // width: document.documentElement.clientWidth - 400,
- // height: 150,
- // },
- // mousewheel: {
- // enabled: true,
- // zoomAtMousePosition: true,
- // modifiers: 'ctrl',
- // minScale: 0.1,
- // maxScale: 10,
- // },
createEdge() {
return new Shape.Edge({
data: {
@@ -277,169 +259,12 @@
textVerticalAnchor: 'middle',
textWrap: {
text: '鏂囧瓧妯℃澘',
- width: -10, // 瀹藉害鍑忓皯 10px
+ width: 120, // 瀹藉害鍑忓皯 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',
- },
- text: {
- fontSize: 20,
- fill: '#262626',
- },
- },
- 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,
@@ -460,34 +285,12 @@
})
this.graph.on('blank:click', ({cell}) => {
- // this.reset()
- // this.type.value = "grid"
this.type = 'grid'
- // this.id = cell.id
})
- this.graph.on('translate', ({ tx, ty }) => {
- console.log(`褰撳墠鍋忕Щ閲忎綅缃�: x=${tx}, y=${ty}`);
- });
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', '#5F95FF')
- edge.prop('labels/0', {
- attrs: {
- body: {
- stroke: '#5F95FF',
- },
- },
-
- })
})
// 鍗曞嚮node鑺傜偣
this.graph.on('node:click', ({node}) => {
@@ -617,14 +420,9 @@
this.diagramJson = JSON.parse(res.data.diagramJson)
let textDiagramJson = JSON.parse(res.data.textDiagramJson)
let smallDiagramJson = JSON.parse(res.data.smallDiagramJson)
- console.log(this.diagramJson, 'this.Diagram json')
- console.log(smallDiagramJson, 'smallDiagramJson')
this.graph.fromJSON(this.diagramJson)
- // this.graph.centerContent()
this.graph.positionContent('left',{ padding: { left: 0 }})
- // this.graph.zoomToFit()
this.bigWidth = this.graph.getContentBBox().width
- console.log(this.bigWidth,'getContentBBox')
// this.graph.resize(this.graph.getContentBBox().width,this.graph.getContentBBox().height)
this.graph.freeze()
this.$refs.textDiagram.getTextDiagram(textDiagramJson)
@@ -640,13 +438,7 @@
},
getPoint(x,smallWidth){
let pointX = Number((x * (this.bigWidth / smallWidth )).toFixed(0))
- // console.log(pointX)
this.graph.setScrollbarPosition(pointX, null)
- // if(pointX<600){
- // this.graph.setScrollbarPosition(pointX, null, { animation: { duration: 400 }})
- // }else {
- // this.graph.scrollToPoint(pointX, null, {animation: {duration: 400}})
- // }
}
}
}
diff --git a/web/src/views/modules/taskReliability/TimeDiagramTemp.vue b/web/src/views/modules/taskReliability/TimeDiagramTemp.vue
index efa7b5f..98b77bc 100644
--- a/web/src/views/modules/taskReliability/TimeDiagramTemp.vue
+++ b/web/src/views/modules/taskReliability/TimeDiagramTemp.vue
@@ -2,11 +2,9 @@
<div>
<el-row :gutter="[8,8]">
<el-col :span="5">
- <div style="height: 80vh">
- <div class="fa-card-a">
+ <div class="fa-card-a" style="height: calc(100vh - 128px)">
<div id="stencil"></div>
</div>
- </div>
</el-col>
<el-col :span="19">
<div class="fa-card-a">
@@ -33,11 +31,8 @@
<div id="container" style="border: 1px solid #EAEBEE;border-radius: 6px;
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);">
</div>
- <config-edge ref="configEdge" v-show="type === 'edge'" :id="id" :globalGridAttr="globalGridAttr"
- :graph="graph"/>
- <config-node v-show="type === 'node'" :id="id" :globalGridAttr="globalGridAttr"
- :graph="graph"
- :shape="shape"/>
+ <config-edge ref="configEdge" v-show="type === 'edge'"/>
+ <config-node ref="configNode" v-show="type === 'node'" />
</div>
</el-col>
</el-row>
@@ -143,7 +138,6 @@
opacity: 0.1,
stroke: '#5F95FF',
- strokeWidth: 1,
connector: 'normal',
label: '',
nodeStroke: '#5F95FF',
@@ -790,8 +784,14 @@
this.shape = cell.shape
this.id = cell.id
console.log(this.shape, 'this.shape')
- if (this.type === 'edge') {
- //this.nodeType = cell.getData().nodeType
+ // if (this.type === 'edge') {
+ // //this.nodeType = cell.getData().nodeType
+ // this.$refs.configEdge.loadData(cell)
+ // }
+ if (this.type === 'node') {
+ this.$refs.configNode.loadData(cell,this.globalGridAttr)
+ }
+ if (this.type === 'edge') {
this.$refs.configEdge.loadData(cell)
}
// this.nodeOpt(this.id, this.globalGridAttr)
@@ -843,24 +843,22 @@
})
})
- this.graph.on('node:mouseenter', ({node}) => {
- const container = document.getElementById('container')
- 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('container')
- const ports = container.querySelectorAll(
- '.x6-port-body',
- )
- this.showPorts(ports, false)
- })
+ // this.graph.on('node:mouseenter', ({node}) => {
+ // const container = document.getElementById('container')
+ // const ports = container.querySelectorAll(
+ // '.x6-port-body',
+ // )
+ // })
+ //
+ // this.graph.on('node:mouseleave', ({node}) => {
+ // // if (node.hasTool('button-remove')) {
+ // // node.removeTool('button-remove')
+ // // }
+ // const container = document.getElementById('container')
+ // const ports = container.querySelectorAll(
+ // '.x6-port-body',
+ // )
+ // })
// this.graph.on('edge:mouseenter', ({cell, view}) => {
// // alert(123)
@@ -1037,7 +1035,7 @@
#stencil {
width: 100%;
- height: 350px;
+ height:100%;
position: relative;
border-right: 1px solid #dfe3e8;
}
--
Gitblit v1.9.1