Merge remote-tracking branch 'origin/master'

xyc

2024-10-14 3d72db70fcb406e02b283c4b624e8282ed301422

 web/src/views/modules/taskReliability/textDiagram.vue

New file
@@ -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和Opera */
  }
</style>