From 027f2fdeaab775c235791cd520d96a47edb23a98 Mon Sep 17 00:00:00 2001
From: wente <329538422@qq.com>
Date: 星期六, 12 十月 2024 11:56:25 +0800
Subject: [PATCH] 时序图缩略图
---
web/src/views/modules/taskReliability/timeDiagramThumbnail.vue | 327 +++++++++++++++++++++++
web/src/views/modules/taskReliability/TimeDiagram.vue | 178 +++++++++---
web/src/views/modules/taskReliability/textDiagram.vue | 321 ++++++++++++++++++++++
3 files changed, 781 insertions(+), 45 deletions(-)
diff --git a/web/src/views/modules/taskReliability/TimeDiagram.vue b/web/src/views/modules/taskReliability/TimeDiagram.vue
index e7b0071..ec5a79e 100644
--- a/web/src/views/modules/taskReliability/TimeDiagram.vue
+++ b/web/src/views/modules/taskReliability/TimeDiagram.vue
@@ -1,8 +1,8 @@
<template>
- <div class="fa-card-a">
- <el-row :gutter="5">
+ <div class="fa-card-a" style="width: calc(100% - 20px);height: calc(100vh - 128px)">
+ <div >
<div class="mod-taskReliability-simulatAssess">
- <el-form :inline="true" :model="dataForm" ref="dataForm" :disabled="dataForm.disabled">
+ <el-form :inline="true" :model="dataForm" ref="dataForm" :disabled="dataForm.disabled" >
<zt-form-item label="浜у搧鑺傜偣" prop="productId">
<zt-select v-model="dataForm.productId" :datas="productList" @change="onProductSelected"/>
</zt-form-item>
@@ -23,25 +23,31 @@
</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>
- <el-col :span="4">
+ <div style="display: flex">
+ <div style="width: 300px">
<div style="margin-right: 5px;height: calc(88vh - 100px)" v-if="isSelect">
<product-model-tree @on-selected="onTreeSelected"
ref="ProductModelTree" :isShow="false" :productId="dataForm.productId"/>
</div>
- </el-col>
- <el-col :span="20">
- <div style="margin-top: 20px">
- <div id="timeDiagram" style="border: 1px solid #EAEBEE;border-radius: 6px;
+ </div>
+ <div style="height: calc(100vh - 233px);width: calc(100% - 300px);margin-left:10px">
+ <div style="margin-top:15px;width:100%; height:100%;border: 1px solid #EAEBEE;border-left:none;border-radius: 6px;
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);">
+<!-- <div style="width:100%;height: 150px" id="thumbnail" class="minimap-container"></div>-->
+ <timeDiagramThumbnail ref="timeDiagramThumbnail" @getPoint="getPoint"></timeDiagramThumbnail>
+ <div id="flexLayout" style="display:flex;">
+ <textDiagram class="flexLayout-item_1" ref="textDiagram"></textDiagram>
+ <div id="timeDiagram" class="flexLayout-item_2" style="height: 300px" ref="scrollView" @mousewheel="handleScroll"></div>
</div>
</div>
- </el-col>
+ </div>
</div>
</div>
- </el-row>
+ </div>
<el-dialog v-dialogDrag :title="title" top="1vh" width='95%' :visible.sync="dialogVisible2" v-if="dialogVisible2">
<model-view ref="modelView"></model-view>
</el-dialog>
@@ -53,13 +59,17 @@
import ProductModelTree from "../basicInfo/ProductModelTree";
import {Graph, Shape, Addon, Cell} from '@antv/x6'
import ModelView from "./ModelView";
+ import textDiagram from "./textDiagram";
+ import timeDiagramThumbnail from "./timeDiagramThumbnail"
export default {
data() {
return {
- title: '',
- knob: HTMLDivElement,
+ bigWidth:0,
+ left:400,
+ title:'',
+ knob:HTMLDivElement,
dialogVisible2: false,
timers: '',
shape: '',
@@ -72,6 +82,9 @@
MTTR: '',
diagramJson: '',
graph: null,
+ timeDiagramWidth:document.documentElement.clientWidth - 300,
+ timeDiagramHeight:document.documentElement.clientHeight - 133,
+ smallTimeDiagramWidth:document.documentElement.clientWidth - 600,
globalGridAttr: {
type: 'mesh',
size: 10,
@@ -119,26 +132,47 @@
}
}
},
+ created() {
+ let scrollView = this.$refs['scrollView']
+ window.addEventListener('scroll', this.handleScroll,true);
+ },
+ destroyed() {
+ let scrollView = this.$refs['scrollView']
+ window.removeEventListener('scroll', this.handleScroll,true);
+ },
mounted() {
this.getProductList()
+ this.$refs.textDiagram.init()
+ this.$refs.timeDiagramThumbnail.init()
},
components: {
ModelView,
ProductModelTree,
SimulatCurve,
+ textDiagram,
+ timeDiagramThumbnail
},
methods: {
+ 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)
+ },
init() {
console.log(document.documentElement.clientWidth, 'document.documentElement.clientWidth')
console.log(document.documentElement.clientHeight, 'document.documentElement.clientHeight')
this.graph = new Graph({
container: document.getElementById('timeDiagram'),
- width: document.documentElement.clientWidth,
- height: document.documentElement.clientHeight - 220,
+ // width: document.documentElement.clientWidth - 100,
+ height: document.documentElement.clientHeight - 440,
// async: true,
grid: {
visible: false,
},
+ virtual:true,
embedding: {
enabled: true,
findParent({node}) {
@@ -157,23 +191,40 @@
autoResize: true,
scroller: {
enabled: true,
- pageVisible: true,
- pageBreak: true,
+ className:'my-scroller-drag',
+ pageWidth:100,
+ pageVisible:true,
+ // pageBreak:true,
+ padding: {
+ top: 0,
+ right: 0,
+ bottom: 0,
+ left: 0,
+ },
+ minVisibleWidth: 500,
+ minVisibleHeight:300,
pannable: true,
},
- mousewheel: {
- enabled: true,
- zoomAtMousePosition: true,
- modifiers: 'ctrl',
- minScale: 0.1,
- maxScale: 10,
- },
+ // 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: {
id: '',
status: '',
- startTime: '',
+ startTime:'',
endTime: '',
},
attrs: {
@@ -192,7 +243,7 @@
},
keyboard: true,
})
- this.knob = document.createElement('div', false)
+ this.knob = document.createElement('div',false)
this.knob.style.position = 'absolute'
document.getElementById('timeDiagram').appendChild(this.knob)
this.graph.centerContent()
@@ -415,7 +466,9 @@
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'
@@ -446,7 +499,7 @@
id: node.getData().dataId,
modelName: node.attr('label/textWrap/modelName'),
}
- this.title = node.attr('label/textWrap/modelName') + "妯″瀷璁捐"
+ this.title=node.attr('label/textWrap/modelName') + "妯″瀷璁捐"
this.$nextTick(() => {
this.$refs.modelView.init(param)
})
@@ -461,22 +514,22 @@
})
// 榧犳爣绉诲叆edge鑺傜偣
- this.graph.on('edge:mouseenter', ({edge, e}) => {
+ this.graph.on('edge:mouseenter', ({edge,e}) => {
const style = this.knob.style
// e.stopPropagation()
- console.log('edge:mouseenter')
+ // console.log('edge:mouseenter')
if (e && edge.data) {
- if (edge.getData().status === 'F') {
+ if (edge.getData().status==='F') {
//console.log(edge.getData(),"eee edge.getData()")
let startTimes = edge.getData().startTimes
let endTimes = edge.getData().endTimes
//console.log(e,'eee')
const p = this.graph.clientToGraph(e.clientX, e.clientY)
- setTimeout(() => {
+ setTimeout(()=>{
style.display = 'block'
style.left = `${p.x}px`
style.top = `${p.y}px`
- style.width = 200 + 'px'
+ style.width = 200+ 'px'
style.height = 80 + 'px'
style.textAlign = 'center'
style.background = '#000'
@@ -484,15 +537,15 @@
style.lineHeight = (40 + 'px')
style.zIndex = 100
this.knob.innerText = `寮�濮嬫椂闂达細${startTimes}\n缁撴潫鏃堕棿锛�${endTimes}`
- }, 0)
- console.log(p, 'p p p')
- console.log(style, this.knob, 'style style')
+ },0)
+ // console.log(p,'p p p')
+ // console.log(style,this.knob,'style style')
}
}
})
// 榧犳爣绉诲嚭edge鑺傜偣
this.graph.on('edge:mouseleave', ({edge}) => {
- console.log('edge:mouseleave')
+ // console.log('edge:mouseleave')
const style = this.knob.style
style.display = 'none'
})
@@ -562,12 +615,21 @@
}
let res = await this.$http.get('/taskReliability/SimulatAssess/getStatus', {params: params})
if (res.data !== null) {
- this.diagramJson = JSON.parse(res.data.smallDiagramJson)
+ 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.zoomToFit()
+ // 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)
+ this.$refs.timeDiagramThumbnail.getThumbnail(smallDiagramJson)
} else {
this.graph.fromJSON(this.emptyJson)
this.graph.centerContent()
@@ -576,24 +638,38 @@
}
console.log(res.data)
},
+ graphRightTranslate(){
+ this.left+=200
+ this.graph.scrollToPoint(this.left, null, { animation: { duration: 400 }})
+ // this.graph.setScrollbarPosition(100, null, { animation: { duration: 200, easing: 'linear' }})
+ },
+ 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}})
+ // }
+ }
}
}
</script>
<style>
#timeDiagram {
display: flex;
- border: 1px solid #dfe3e8;
- width: 100% !important;
+ /*border: 1px solid #dfe3e8;*/
+ /*width: 60% !important;*/
}
#timeDiagram .x6-cell.x6-node {
cursor: inherit;
}
- .x6-graph-scroller.x6-graph-scroller-pannable {
- width: 100% !important;
+ #flexLayout .x6-graph-scroller.x6-graph-scroller-pannable {
+ width: 92% !important;
}
-
.x6-widget-stencil {
position: relative;
height: 100%;
@@ -603,4 +679,16 @@
position: relative;
height: 100%;
}
+ .my-scroller-drag {
+ overflow: auto; /* 闇�瑕佹粴鍔ㄦ椂淇濇寔杩欎釜灞炴�� */
+ scrollbar-width: none; /* 瀵逛簬Firefox */
+ }
+
+ .my-scroller-drag::-webkit-scrollbar {
+ display: none; /* 瀵逛簬Chrome, Safari鍜孫pera */
+ }
+ .zt.light .el-tab-pane .mod-taskReliability-simulatAssess .el-form{
+ margin-top: 5px;
+ margin-bottom: 0;
+}
</style>
diff --git a/web/src/views/modules/taskReliability/textDiagram.vue b/web/src/views/modules/taskReliability/textDiagram.vue
new file mode 100644
index 0000000..3c1f530
--- /dev/null
+++ b/web/src/views/modules/taskReliability/textDiagram.vue
@@ -0,0 +1,321 @@
+<template>
+ <div id="textDiagram"></div>
+</template>
+
+<script>
+ import {Graph, Shape, Addon, Cell} from '@antv/x6'
+
+ export default {
+ name: "textDiagram",
+ data(){
+ return{
+ graph:null,
+ }
+ },
+ methods:{
+ init() {
+ console.log(document.documentElement.clientWidth, 'document.documentElement.clientWidth')
+ console.log(document.documentElement.clientHeight, 'document.documentElement.clientHeight')
+ this.graph = new Graph({
+ container: document.getElementById('textDiagram'),
+ // width:250,
+ height: document.documentElement.clientHeight - 440,
+ // async: true,
+ grid: {
+ visible: false,
+ },
+ embedding: {
+ enabled: true,
+ findParent({node}) {
+ const bbox = node.getBBox()
+ return this.getNodes().filter((node) => {
+ // 鍙湁 data.parent 涓� true 鐨勮妭鐐规墠鏄埗鑺傜偣
+ const data = node.getData()
+ if (data && data.parent) {
+ const targetBBox = node.getBBox()
+ return bbox.isIntersectWithRect(targetBBox)
+ }
+ return false
+ })
+ }
+ },
+ autoResize: true,
+ scroller: {
+ enabled: true,
+ className:'my-scroller-text',
+ padding: {
+ top: 0,
+ right: 0,
+ bottom: 0,
+ left: 0,
+ },
+ pannable: false,
+ },
+ createEdge() {
+ return new Shape.Edge({
+ data: {
+ id: '',
+ status: '',
+ startTime:'',
+ endTime: '',
+ },
+ attrs: {
+ line: {
+ stroke: '#A2B1C3',
+ strokeWidth: 2,
+ sourceMarker: 'none',
+ targetMarker: 'none'
+ }
+ },
+ tools: {
+ name: 'vertices',
+ },
+ zIndex: 0,
+ })
+ },
+ keyboard: true,
+ })
+ this.graph.centerContent()
+
+ 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',
+ },
+ 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:'#080808'
+ },
+ refX: '0',
+ refY: -0.5,
+ refY2: 1,
+ textAnchor: 'middle',
+ textVerticalAnchor: 'middle',
+ },
+ },
+ markup: [
+ {
+ tagName: 'rect',
+ selector: 'body',
+ },
+ {
+ tagName: 'text',
+ selector: 'text',
+ },
+ ],
+ ports: {...this.ports},
+ },
+ true,
+ )
+ },
+ getTextDiagram(diagramJson){
+ this.graph.unfreeze()
+ this.graph.fromJSON(diagramJson)
+ this.graph.positionContent('left',{ padding: { left: 0 }})
+ this.graph.freeze()
+ // this.graph.centerContent()
+ // this.graph.zoomToFit()
+ },
+ setScroll(top){
+ this.graph.setScrollbarPosition(null, top)
+ }
+ },
+ }
+</script>
+
+<style >
+ #textDiagram {
+ /*border: 1px solid #dfe3e8;*/
+ width: 100% !important;
+ }
+ /*#textDiagram .x6-graph-scroller.x6-graph-scroller-pannable {*/
+ /* width:100% !important;*/
+ /*}*/
+
+ .x6-widget-stencil {
+ position: relative;
+ height: 100%;
+ }
+ #textDiagram .x6-node {
+ cursor: default ;
+ }
+ .x6-widget-stencil-content {
+ position: relative;
+ height: 100%;
+ }
+ .my-scroller-text {
+ overflow: auto; /* 闇�瑕佹粴鍔ㄦ椂淇濇寔杩欎釜灞炴�� */
+ scrollbar-width: none; /* 瀵逛簬Firefox */
+ }
+
+ .my-scroller-text::-webkit-scrollbar {
+ display: none; /* 瀵逛簬Chrome, Safari鍜孫pera */
+ }
+</style>
diff --git a/web/src/views/modules/taskReliability/timeDiagramThumbnail.vue b/web/src/views/modules/taskReliability/timeDiagramThumbnail.vue
new file mode 100644
index 0000000..b3678a7
--- /dev/null
+++ b/web/src/views/modules/taskReliability/timeDiagramThumbnail.vue
@@ -0,0 +1,327 @@
+<template>
+ <div id="timeDiagramThumbnail"></div>
+</template>
+
+<script>
+ import {Graph, Shape, Addon, Cell} from '@antv/x6'
+
+ export default {
+ name: "timeDiagramThumbnail",
+ data(){
+ return{
+ graph:null,
+ smallWidth:0,
+ targetNode:{},
+ }
+ },
+ methods:{
+ init() {
+ console.log(document.documentElement.clientWidth, 'document.documentElement.clientWidth')
+ console.log(document.documentElement.clientHeight, 'document.documentElement.clientHeight')
+
+ this.graph = new Graph({
+ container: document.getElementById('timeDiagramThumbnail'),
+ // width:250,
+ height: 150,
+ grid: {
+ visible: false,
+ },
+ translating: {
+ restrict(view) {
+ const cell = view.cell
+ if (cell.isNode() || cell.isEdge()) {
+ const parent = cell.getParent()
+ if (parent) {
+ return parent.getBBox()
+ }
+ }
+ return null
+ },
+ },
+ interacting: function (cellView) {
+ const data = cellView.cell.getData();
+ if (cellView.cell.isEdge()) {
+ return { edgeMovable : false };
+ }
+ else if (data && data.nodeMovable ) {
+ return { nodeMovable : false };
+ }
+ return true;
+ },
+ // embedding: {
+ // enabled: true,
+ // findParent({node}) {
+ // const bbox = node.getBBox()
+ // return this.getNodes().filter((node) => {
+ // // 鍙湁 data.parent 涓� true 鐨勮妭鐐规墠鏄埗鑺傜偣
+ // const data = node.getData()
+ // if (data && data.parent) {
+ // const targetBBox = node.getBBox()
+ // return bbox.isIntersectWithRect(targetBBox)
+ // }
+ // return false
+ // })
+ // }
+ // },
+ // autoResize: true,
+ // keyboard: true,
+ })
+ this.graph.centerContent()
+ 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',
+ },
+ 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:'#080808'
+ },
+ refX: '0',
+ refY: -0.5,
+ refY2: 1,
+ textAnchor: 'middle',
+ textVerticalAnchor: 'middle',
+ },
+ },
+ markup: [
+ {
+ tagName: 'rect',
+ selector: 'body',
+ },
+ {
+ tagName: 'text',
+ selector: 'text',
+ },
+ ],
+ ports: {...this.ports},
+ },
+ true,
+ )
+
+ this.graph.on('node:moved', ({ e, x, y, node, view }) => {
+ this.$emit('getPoint',x,this.smallWidth)
+ })
+ },
+ getThumbnail(smallDiagramJson){
+ this.graph.fromJSON(smallDiagramJson)
+ this.graph.centerContent()
+ this.smallWidth = this.graph.getContentBBox().width
+ const nodes = this.graph.getNodes()
+ for (const otherNode of nodes) {
+ if (otherNode.parent){
+ this.targetNode = otherNode
+ }
+ }
+ // console.log(this.graph.getContentBBox().width,'DiagramJson11')
+ // this.graph.zoomToFit()
+ },
+ getNodePointX(x,bigWidth){
+ let pointX = Number((x / ( bigWidth /this.smallWidth)).toFixed(0))
+ this.targetNode.position(pointX, this.targetNode.position().y)
+ },
+ // setScroll(top){
+ // this.graph.setScrollbarPosition(null, top)
+ // }
+ },
+ }
+</script>
+
+<style >
+ #timeDiagramThumbnail {
+ border: 1px solid #dfe3e8;
+ width: 100% !important;
+ }
+ /*#timeDiagramThumbnail .x6-graph-scroller.x6-graph-scroller-pannable {*/
+ /* width:100% !important;*/
+ /*}*/
+ #timeDiagramThumbnail .x6-edge {
+ cursor: default !important; ;
+ }
+ /*#timeDiagramThumbnail .x6-node {*/
+ /* cursor: default ;*/
+ /*}*/
+ .x6-widget-stencil {
+ position: relative;
+ height: 100%;
+ }
+
+ .x6-widget-stencil-content {
+ position: relative;
+ height: 100%;
+ }
+ .my-scroller-text {
+ overflow: auto; /* 闇�瑕佹粴鍔ㄦ椂淇濇寔杩欎釜灞炴�� */
+ scrollbar-width: none; /* 瀵逛簬Firefox */
+ }
+
+ .my-scroller-text::-webkit-scrollbar {
+ display: none; /* 瀵逛簬Chrome, Safari鍜孫pera */
+ }
+</style>
--
Gitblit v1.9.1