Merge remote-tracking branch 'origin/master'

xyc

2024-10-14 3d72db70fcb406e02b283c4b624e8282ed301422

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

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