tt

xjj

2024-02-29 1a6dcd7c86d6ae6acc0c523d38a8ae46e461fa75

 zy-asrs-flow/src/pages/home/index.jsx

@@ -1,11 +1,91 @@
import ProSkeleton from '@ant-design/pro-skeleton';
import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import { data } from './data';
import G6 from '@antv/g6';
import "./index.css"

export default () => (
    <div
        style={{
            padding: 24,
        }}
    >
        <ProSkeleton type="list" />
    </div>
);
export default function() {
  const ref = React.useRef(null);
  let graph = null;

  useEffect(() => {
    if (!graph) {
      graph = new G6.Graph({
        container: ReactDOM.findDOMNode(ref.current),
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight,
        modes: {
          default: [
            'drag-canvas', 
            'zoom-canvas',
            'drag-node',
          ],
          edit: ['click-select']
        },
        layout: {
          type: 'dagre',
          direction: 'LR',
        },
        defaultNode: {
          shape: 'node',
          type: 'rect',
          labelCfg: {
            style: {
              fill: '#000000A6',
              fontSize: 14,
            },
          },
          style: {
            // 仅在 keyShape 上生效
            fill: 'lightblue',
            stroke: '#888',
            lineWidth: 1,
            radius: 7,
          },
          linkPoints: {
            top: true,
            bottom: true,
            left: true,
            right: true,
            // ... 四个圆的样式可以在这里指定
          },
        },
        defaultEdge: {
          shape: 'polyline',
        },
        nodeStateStyles: {
          // 各状态下的样式，平铺的配置项仅在 keyShape 上生效。需要在其他 shape 样式上响应状态变化则写法不同，参见上文提到的 配置状态样式 链接
          hover: {
            fillOpacity: 0.1,
            lineWidth: 1,
          },
        },
      });
    }
    graph.data(data);
    graph.render();
    
    // 监听鼠标进入节点事件
    graph.on('node:mouseenter', (evt) => {
      const node = evt.item;
      // 激活该节点的 hover 状态
      graph.setItemState(node, 'hover', true);
    });

    // 监听鼠标离开节点事件
    graph.on('node:mouseleave', (evt) => {
      const node = evt.item;
      // 关闭该节点的 hover 状态
      graph.setItemState(node, 'hover', false);
    });

    graph.on('node:click', (evt) => {
      const node = evt.item;
      const model = node.getModel();
      // 在这里打开模态框或者编辑表格，传入model以便用于初始化编辑内容
      showModal(model);
    });
  }, []);

  return <div ref={ref}></div>;
}