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/textDiagram.vue | 319 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 319 insertions(+), 0 deletions(-)
diff --git a/web/src/views/modules/taskReliability/textDiagram.vue b/web/src/views/modules/taskReliability/textDiagram.vue
new file mode 100644
index 0000000..2fb3627
--- /dev/null
+++ b/web/src/views/modules/taskReliability/textDiagram.vue
@@ -0,0 +1,319 @@
+<template>
+ <div id="textDiagram"></div>
+</template>
+
+<script>
+ import {Graph, Shape, Addon, Cell} from '@antv/x6'
+
+ export default {
+ name: "textDiagram",
+ data(){
+ return{
+ textGraph:null,
+ }
+ },
+ methods:{
+ init() {
+ this.textGraph = 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.textGraph.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.textGraph.unfreeze()
+ this.textGraph.fromJSON(diagramJson)
+ this.textGraph.positionContent('left',{ padding: { left: 0 }})
+ this.textGraph.freeze()
+ // this.textGraph.centerContent()
+ // this.textGraph.zoomToFit()
+ },
+ setScroll(top){
+ this.textGraph.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>
--
Gitblit v1.9.1