Merge branch 'master' of http://47.97.1.152:5880/r/zy-asrs-master

luxiaotao1123

2024-02-29 4d5c4b0cd06f865051e9c2e3f662b2292205ba5b

Merge branch 'master' of http://47.97.1.152:5880/r/zy-asrs-master

 zy-asrs-flow/package.json

@@ -48,6 +48,7 @@
  "dependencies": {
    "@ant-design/icons": "^5.3.0",
    "@ant-design/pro-components": "^2.6.48",
    "@antv/g6": "^4.8.24",
    "@antv/xflow": "^2.0.4",
    "@umijs/route-utils": "^2.2.2",
    "antd": "^5.13.2",

 zy-asrs-flow/src/config/setting.ts

@@ -1,5 +1,5 @@
// 接口地址
export const API_BASE_URL: string = 'http://localhost:9090/wcs';
export const API_BASE_URL: string = 'http://172.16.0.219:9090/wcs';

// 项目名称
export const PROJECT_NAME: string = 'admin';

 zy-asrs-flow/src/pages/home/data.js

New file
@@ -0,0 +1,101 @@
export const data = {
    nodes: [
      {
        id: '1',
        label: '公司1',
      },
      {
        id: '2',
        label: '公司2',
      },
      {
        id: '3',
        label: '公司3'
      },
      {
        id: '4',
        label: '公司4'
      },
      {
        id: '5',
        label: '公司5'
      },
      {
        id: '6',
        label: '公司6'
      },
      {
        id: '7',
        label: '公司7'
      },
      {
        id: '8',
        label: '公司8'
      }
    ],
    edges: [
      {
        source: '1',
        target: '2',
        data: {
          type: 'name1',
          amount: '100,000,000,00 元',
          date: '2019-08-03'
        }
      },
      {
        source: '1',
        target: '3',
        data: {
          type: 'name2',
          amount: '100,000,000,00 元',
          date: '2019-08-03'
        }
      },
      {
        source: '2',
        target: '5',
        data: {
          type: 'name1',
          amount: '100,000,000,00 元',
          date: '2019-08-03'
        }
      },
      {
        source: '5',
        target: '6',
        data: {
          type: 'name2',
          amount: '100,000,000,00 元',
          date: '2019-08-03'
        }
      },
      {
        source: '3',
        target: '4',
        data: {
          type: 'name3',
          amount: '100,000,000,00 元',
          date: '2019-08-03'
        }
      },
      {
        source: '4',
        target: '7',
        data: {
          type: 'name2',
          amount: '100,000,000,00 元',
          date: '2019-08-03'
        }
      },
      {
        source: '1',
        target: '8',
        data: {
          type: 'name2',
          amount: '100,000,000,00 元',
          date: '2019-08-03'
        }
      }
    ]
  };

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

New file
@@ -0,0 +1,10 @@
    /* 提示框的样式 */
    .g6-tooltip {
        border: 1px solid #e2e2e2;
        border-radius: 4px;
        font-size: 12px;
        color: #545454;
        background-color: rgba(255, 255, 255, 0.9);
        padding: 10px 8px;
        box-shadow: rgb(174, 174, 174) 0px 0px 10px;
      }

 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>;
}