From 17ce02ec6fefa4e8b9ac870e2b52dea0942f5597 Mon Sep 17 00:00:00 2001
From: wente <329538422@qq.com>
Date: 星期四, 05 十二月 2024 09:40:30 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
web/src/views/modules/taskReliability/TimeDiagramTemp.vue | 286 +++++++++++++--------------------------------------------
1 files changed, 66 insertions(+), 220 deletions(-)
diff --git a/web/src/views/modules/taskReliability/TimeDiagramTemp.vue b/web/src/views/modules/taskReliability/TimeDiagramTemp.vue
index f5fa205..98b77bc 100644
--- a/web/src/views/modules/taskReliability/TimeDiagramTemp.vue
+++ b/web/src/views/modules/taskReliability/TimeDiagramTemp.vue
@@ -2,58 +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 style="height: 42vh;margin-top: 30px;background: #f5f5f5;padding-bottom:20px ">
- <h3 style="background: #ededed;font-size: 12px;height: 32px;line-height: 32px;padding: 0 5px 0 8px">
- 瀵归綈鏂瑰紡</h3>
- <div style="text-align: center">
- <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;color: #5F95FF"
- class="wt-iconfont icon-zuoduiqi"></i></el-button>
- </el-tooltip>
- </div>
- <div style="text-align: center">
- <el-tooltip class="item" effect="dark" content="灞呬腑瀵归綈" placement="left">
- <el-button style="margin-left: 0;margin-top: 10px;padding: 2px;border: 1px solid #5F95FF"
- @click="centerAlign()"><i style="font-size: 2rem;color: #5F95FF"
- class="wt-iconfont icon-chuizhiduiqi"></i></el-button>
- </el-tooltip>
- </div>
- <div style="text-align: center">
- <el-tooltip class="item" effect="dark" content="鍙冲榻�" placement="left">
- <el-button style="margin-left: 0;margin-top: 10px;padding: 2px;border: 1px solid #5F95FF"
- @click="rightAlign()"><i style="font-size: 2rem;color: #5F95FF"
- class="wt-iconfont icon-youduiqi"></i></el-button>
- </el-tooltip>
- </div>
- <div style="text-align: center">
- <el-tooltip class="item" effect="dark" content="椤堕儴瀵归綈" placement="left">
- <el-button style="margin-left: 0;margin-top: 10px;padding: 2px;border: 1px solid #5F95FF"
- @click="topAlign()"><i style="font-size: 2rem;color:#5F95FF"
- class="wt-iconfont icon-dingduiqi"></i></el-button>
- </el-tooltip>
- </div>
- <div style="text-align: center">
- <el-tooltip class="item" effect="dark" content="姘村钩瀵归綈" placement="left">
- <el-button style="margin-left: 0;margin-top: 10px;padding: 2px;border: 1px solid #5F95FF"
- @click="shuipingAlign()"><i style="font-size: 2rem;color:#5F95FF"
- class="wt-iconfont icon-shuipingduiqi"></i></el-button>
- </el-tooltip>
- </div>
- <div style="text-align: center">
- <el-tooltip class="item" effect="dark" content="搴曢儴瀵归綈" placement="left">
- <el-button style="margin-left: 0;margin-top: 10px;padding: 2px;border: 1px solid #5F95FF"
- @click="bottomAlign()"><i style="font-size: 2rem;color:#5F95FF"
- class="wt-iconfont icon-diduiqi"></i></el-button>
- </el-tooltip>
- </div>
- </div>
</div>
- </div>
</el-col>
<el-col :span="19">
<div class="fa-card-a">
@@ -80,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>
@@ -190,7 +138,6 @@
opacity: 0.1,
stroke: '#5F95FF',
- strokeWidth: 1,
connector: 'normal',
label: '',
nodeStroke: '#5F95FF',
@@ -294,9 +241,7 @@
},
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)
@@ -372,20 +317,11 @@
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
- // await this.$alert('璇ラ」鐩繕鏈紪鍒剁綉缁滃浘', '鎻愮ず', {
- // confirmButtonText: '纭畾'
- // })
this.graph.fromJSON(this.emptyJson)
- // this.graph.centerContent()
- // this.graph.zoomToFit()
- // this.graph.freeze()
}
},
init() {
@@ -414,19 +350,6 @@
})
}
},
- // translating: {
- // restrict(view) {
- // const cell = view.cell
- // if (cell.isNode()) {
- // const parent = cell.getParent()
- // if (parent) {
- // return parent.getBBox()
- // }
- // }
- //
- // return null
- // },
- // },
onToolItemCreated({tool}) {
const handle = tool
const options = handle.options
@@ -476,7 +399,7 @@
line: {
stroke: '#A2B1C3',
strokeWidth: 2,
- targetMarker: 'classic'
+ targetMarker: null,
}
},
tools: {
@@ -492,14 +415,6 @@
text: ''
}
},
- // position: {
- // distance: 0.5,
- // angle: 180,
- // options: {
- // keepGradient: true,
- // ensureLegibility: true
- // }
- // }
}],
zIndex: 0,
})
@@ -752,80 +667,13 @@
},
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 scaleImgCenter = this.graph.createNode({
- shape: 'image',
- imageUrl: require('@/assets/img/scale/center.jpg'),
- width: 36,
- height: 20,
- data: {
- imagePost: 'center'
- }
- })
-
- const scaleImgTop = this.graph.createNode({
- shape: 'image',
- imageUrl: require('@/assets/img/scale/top.jpg'),
- width: 36,
- height: 20,
- data: {
- imagePost: 'top'
- }
- })
-
- const scaleImgRight = this.graph.createNode({
- shape: 'image',
- imageUrl: require('@/assets/img/scale/right.jpg'),
- width: 36,
- height: 20,
- data: {
- imagePost: 'right'
- }
- })
- const scaleImgBottom = this.graph.createNode({
- shape: 'image',
- imageUrl: require('@/assets/img/scale/bottom.jpg'),
- width: 36,
- height: 20,
- data: {
- imagePost: 'bottom'
- }
- })
- const scaleImgLeft = this.graph.createNode({
- shape: 'image',
- imageUrl: require('@/assets/img/scale/left.jpg'),
- width: 36,
- height: 20,
- data: {
- imagePost: 'left'
- }
- })
-
// scaleImgTop.setAttribute('crossOrigin', 'Anonymous')
- stencil.load([r5, r6, r9, scaleImgTop, scaleImgCenter, scaleImgRight, scaleImgBottom, scaleImgLeft], 'group1')
+ stencil.load([r9], 'group1')
this.graph.bindKey(['meta+c', 'ctrl+c'], () => {
const cells = this.graph.getSelectedCells()
if (cells.length) {
@@ -936,20 +784,20 @@
this.shape = cell.shape
this.id = cell.id
console.log(this.shape, 'this.shape')
+ // 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)
})
//鍗曞嚮杈硅妭鐐�
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}) => {
@@ -995,59 +843,57 @@
})
})
- 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: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('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('edge:mouseenter', ({cell, view}) => {
- // alert(123)
- cell.addTools([
- {
- name: 'source-arrowhead',
- },
- {
- name: 'target-arrowhead',
- args: {
- attrs: {
- fill: 'red',
- },
- },
- },
- ])
- cell.addTools(
- [
- {
- name: 'segments',
- args: {snapRadius: 20, attrs: {fill: '#444'}}
- }
- ]
- )
- })
-
- this.graph.on('edge:mouseleave', ({cell}) => {
- cell.removeTools()
- })
+ // this.graph.on('edge:mouseenter', ({cell, view}) => {
+ // // alert(123)
+ // cell.addTools([
+ // {
+ // name: 'source-arrowhead',
+ // },
+ // {
+ // name: 'target-arrowhead',
+ // args: {
+ // attrs: {
+ // fill: 'red',
+ // },
+ // },
+ // },
+ // ])
+ // 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'
- }
- },
+ // showPorts(ports, show) {
+ // for (let i = 0, len = ports.length; i < len; i = i + 1) {
+ // ports[i].style.visibility = show ? 'visible' : 'hidden'
+ // }
+ // },
async saveDiagram() {
console.log(JSON.stringify(this.graph.toJSON()), 'graph.toJSON()')
@@ -1184,12 +1030,12 @@
}
.x6-graph-scroller.x6-graph-scroller-pannable {
- width: 100% !important;
+ width: 100% ;
}
#stencil {
width: 100%;
- height: 350px;
+ height:100%;
position: relative;
border-right: 1px solid #dfe3e8;
}
--
Gitblit v1.9.1