From 3d72db70fcb406e02b283c4b624e8282ed301422 Mon Sep 17 00:00:00 2001
From: xyc <jc_xiong@hotmail.com>
Date: 星期一, 14 十月 2024 10:09:23 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
web/src/views/modules/taskReliability/timeDiagramThumbnail.vue | 332 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 332 insertions(+), 0 deletions(-)
diff --git a/web/src/views/modules/taskReliability/timeDiagramThumbnail.vue b/web/src/views/modules/taskReliability/timeDiagramThumbnail.vue
new file mode 100644
index 0000000..7475f33
--- /dev/null
+++ b/web/src/views/modules/taskReliability/timeDiagramThumbnail.vue
@@ -0,0 +1,332 @@
+<template>
+ <div id="timeDiagramThumbnail"></div>
+</template>
+
+<script>
+ import {Graph, Shape, Addon, Cell} from '@antv/x6'
+
+ export default {
+ name: "timeDiagramThumbnail",
+ data(){
+ return{
+ thumbnailGraph:null,
+ smallWidth:0,
+ targetNode:{},
+ }
+ },
+ methods:{
+ init() {
+ console.log(document.documentElement.clientWidth, 'document.documentElement.clientWidth')
+ console.log(document.documentElement.clientHeight, 'document.documentElement.clientHeight')
+
+ this.thumbnailGraph = 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.thumbnailGraph.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.thumbnailGraph.on('node:moving', ({ e, x, y, node, view }) => {
+ this.$emit('getPoint',x,this.smallWidth)
+ })
+ },
+ getThumbnail(smallDiagramJson){
+ this.thumbnailGraph.fromJSON(smallDiagramJson)
+ this.thumbnailGraph.centerContent()
+ this.smallWidth = this.thumbnailGraph.getContentBBox().width
+ const nodes = this.thumbnailGraph.getNodes()
+ for (const otherNode of nodes) {
+ if (otherNode.hasParent()){
+ this.targetNode = otherNode
+ console.log(this.targetNode,'targetNode')
+ }
+ }
+ // console.log(this.thumbnailGraph.getContentBBox().width,'DiagramJson11')
+ // this.thumbnailGraph.zoomToFit()
+ },
+ getNodePointX(x,bigWidth){
+ let pointX = Number((x / ( bigWidth /this.smallWidth)).toFixed(0))
+ if(this.targetNode){
+ this.targetNode.position(pointX, this.targetNode.position().y)
+ return false
+ }
+
+ },
+ // setScroll(top){
+ // this.thumbnailGraph.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