Merge remote-tracking branch 'origin/master'

xyc

2024-10-14 3d72db70fcb406e02b283c4b624e8282ed301422

Merge remote-tracking branch 'origin/master'

 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,46 @@
        }
      }
    },
    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.init()
      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 +190,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,11 +242,11 @@
          },
          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()

        this.graph.positionContent('left',{ padding: { left: 0 }})
        // this.graph.centerContent()
        Graph.registerNode(
          'custom-rect',
          {
@@ -415,7 +465,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 +498,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 +513,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 +536,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'
        })
@@ -529,7 +581,7 @@
        this.$nextTick(() => {
          this.$refs.ProductModelTree.getProductList()
        })
        this.init()
        // this.init()
      },
      onTaskSelected(data) {
        console.log(data, ' onProductSelected(data)')
@@ -562,38 +614,57 @@
        }
        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()
          this.graph.positionContent('left',{ padding: { left: 0 }})
          // this.graph.centerContent()
          //this.graph.zoomToFit()
          this.graph.freeze()
        }
        console.log(res.data)
      },
      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 +674,16 @@
    position: relative;
    height: 100%;
  }
  .my-scroller-drag {
    overflow: auto; /* 需要滚动时保持这个属性 */
    scrollbar-width: none; /* 对于Firefox */
  }

  .my-scroller-drag::-webkit-scrollbar {
    display: none; /* 对于Chrome, Safari和Opera */
  }
  .zt.light .el-tab-pane .mod-taskReliability-simulatAssess .el-form{
    margin-top: 5px;
   margin-bottom: 0;
}
</style>

 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>

 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>