修改仿真

xyc

2024-08-02 d9b3b4b0ad0f4022cbb406a9fb3ad56a5e7f7ff3

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

@@ -118,6 +118,7 @@
    },
    mounted() {
      this.getProductList()

    },
    components: {
      ProductModelTree,
@@ -159,6 +160,9 @@
          },
          autoResize: true,
          history: true,
          // panning: {
          //   enabled: true,
          // },
          scroller: {
            enabled: true,
            pageVisible: true,
@@ -187,7 +191,6 @@
            },
            // anchor: 'center',
            connectionPoint: 'anchor',
            allowBlank: false,
            snap: {
              radius: 20,
            },
@@ -217,6 +220,9 @@
                zIndex: 0,
              })
            },
            // validateConnection({targetMagnet}) {
            //   return !!targetMagnet
            // },
          },
          highlighting: {
            magnetAdsorbed: {
@@ -324,7 +330,101 @@
            },
            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,
        )
@@ -539,7 +639,10 @@
        })

        this.graph.on('blank:click', ({cell}) => {
          // this.reset()
          // this.type.value = "grid"
          this.type = 'grid'
          // this.id = cell.id
        })

        this.graph.on('cell:click', ({cell}) => {
@@ -566,16 +669,14 @@
        // 单击node节点
        this.graph.on('node:click', ({node}) => {
          // this.reset()
          if (node.getData().dataId) {
            this.dialogVisible2 = true
            let param = {
              id: node.getData().dataId,
              modelName: node.attr('label/textWrap/text'),
            }
            this.$nextTick(() => {
              this.$refs.rbdEditImg.init(param)
            })
          }
          node.attr('line/stroke', '#5F95FF')
          node.prop('labels/0', {
            attrs: {
              body: {
                stroke: '#5F95FF',
              },
            },
          })
        })
        // 控制连接桩显示/隐藏
        this.graph.on('node:delete', ({view, e}) => {