【无标题】ANTV G6 字段级

<template>
    <div class="asset_column_g6">
        <div id="container" class="container"></div>
    </div>
</template>

<script>
import G6 from '@antv/g6';
import assetColumnDetail from './assetColumnDetail.js';
import edgeConfig from './edgeConfig'
export default {
    data() {
        return {

        }
    },
    methods: {
        initGraph() {
            const container = document.getElementById('container');
            const width = container.scrollWidth;
            const height = container.scrollHeight || 500;
            const tooltip = new G6.Tooltip({
              offsetX: 0,
              offsetY:-240,
              getContent(evt) {
                const outDiv = document.createElement('div');
                let text = evt.target.cfg.name == "expandIcon-shape" ? "展开节点信息" : "收起节点信息";
                outDiv.style.width = 'auto';
                outDiv.innerHTML = `<span style="user-select: none;">${text}</span>`
                return outDiv
              },
              shouldBegin(evt) {
                return evt.target.cfg.name == "expandIcon-shape" || evt.target.cfg.name == "collapseIcon-shape"
              },
              itemTypes: ['node']
            });
            const nodeStateStyles = {};
            const edgeStateStyles = { };
            const that = this;
            
            G6.registerNode(
              'tree-node',
              {
                draw(cfg, group) {
                  let rect_common = null;
                  rect_common = group.addShape('rect', {
                      attrs: {
                        stroke: '#333',
                        x: 0,
                        y: 0,
                        width: 150,
                        height: that.toComputeContainerHeight(cfg),
                        lineWidth: 1,
                        cursor: 'pointer',
                        // shadowColor: 'rgb(215, 216, 218)',
                        shadowColor: 'rgb(184, 185, 187)',
                        shadowBlur: 5,
                        shadowOffsetX: 2,
                        shadowOffsetY: 2,
                        fill: 'rgb(255, 255, 255)',
                      },
                      name: 'rect_common-shape',
                    });
                  
                  that.renderAssetNameArea(group, cfg);

                  let columns = cfg.columns || [];

                  for(let i = 0; i < columns.length; i++) {
                    that.renderColumnArea(group, cfg, i);
                    that.renderColumnTxt(group, cfg, i);
                  };

                  that.renderAssetNameTitle(group, cfg);

                  
                  return rect_common
                },
              }
            );

            this.graph = new G6.TreeGraph({
              container: 'container',
              width,
              height,
              animate: false, // Boolean，切换布局时是否使用动画过度，默认为 false
              animateCfg: {
                duration: 500, // Number，一次动画的时长
                easing: 'linearEasing', // String，动画函数
              },
              modes: {
                default: [
                  'drag-canvas',
                  'zoom-canvas',
                ],
              },
              defaultNode: {
                // size: 26,
                type: 'tree-node',
                anchorPoints: [
                  [0, 0.5],
                  [1, 0.5],
                ],
              },
              defaultEdge: {
                type: 'polyline',
                style: {
                  lineWidth: 1,
                  opacity: 0,
                }
              },
              nodeStateStyles: nodeStateStyles,
              edgeStateStyles: edgeStateStyles,
              plugins: [tooltip],
              layout: {
                type: 'compactBox',
                direction: 'RL',
                getId: function getId(d) {
                  return d.id;
                },
                getHeight: function getHeight(cfg) {
                  let columns = cfg.columns || [];
                  return 15+15*(columns.length);
                },
                getWidth: function getWidth() {
                  return 150;
                },
                getVGap: function getVGap(cfg, a, b, c) {
                  return 10;
                },
                getHGap: function getHGap() {
                  return 30;
                },
              },
            });
            this.graph.node((node) => {
              console.log('node', node);
              let anchorPoints = [];
              let columnNames = node.columns.map(c => c.columnName);
              let d = 1 / (node.columns.length+1);
              let anchorPointsList = [];
              let p = 0; 
              for (let i = 0; i < node.columns.length+1; i++) {
                // anchorPointsList.push((p));
                anchorPointsList.push((p + (d/2)));
                p = p + d;
              };
              let sourcePoints = {};
              let targetPoints = {};
              anchorPointsList.forEach((point,index) => {
                let nameKey = '';
                if (index == 0) {
                  nameKey = node.id;
                }else {
                  nameKey = node.columns[index-1].columnName;
                };
                let sourceL = [0];
                let targetL = [1];
                sourceL.push(point);
                targetL.push(point);
                sourcePoints[nameKey] = sourceL;
                targetPoints[nameKey] = targetL;
                anchorPoints.push(sourceL,targetL);
              });
              anchorPoints = [...anchorPoints, [0.5, 0], [0.5, 1]]
              return {
                anchorPoints,
                sourcePoints,
                targetPoints,
                columnNames
              }
            });
        },
        toComputeContainerHeight(cfg) {
          let columns = cfg.columns || [];
          return 15+15*(columns.length);
        },
        renderPath(group, cfg, i) {
          const child = group.find(function (item) {
            let cfg = item.cfg;
            if (cfg.name == 'ret-shape-column-area' || cfg.name == 'rect-shape-asset-name') {
                console.log('groupItem', cfg.totalMatrix);
                // console.log('groupItem', item.getCanvasBBox());
            }
            return item.attr('fill') === 'red'; // 找到首个填充为红色的图形
          });
        },
        renderColumnTxt(group, cfg, i) {
          let column = cfg.columns[i];
          const columnNameTxt = group.addShape('text', {
            attrs: {
              text: `字段${i+1}：` + column.columnName,
              textAlign: 'left',
              textBaseline: 'top',
              fill: '#333',
              x: 10,
              y: 15+((15)*i) + 4,
              fontSize: 8,
              cursor: 'pointer'
            },
            name: 'txt-shape-column',
          });
          return columnNameTxt;
        },
        renderColumnArea(group, cfg, i) {
          const columnArea = group.addShape('rect', {
            attrs: {
              stroke: '#333',
              x: 0,
              y: 15+((15)*i),
              width: 150,
              height: 15,
              lineWidth: 1,
              cursor: 'pointer',
              fill: '#f5f5f5',
            },
            name: 'ret-shape-column-area',
          });
          return columnArea;
        },
        renderAssetNameArea(group, cfg) {
          const assetNameArea = group.addShape('rect', {
            attrs: {
              stroke: '#333',
              x: 0,
              y: 0,
              width: 150,
              height: 15,
              lineWidth: 1,
              cursor: 'pointer',
              fill: '#dadada',
            },
            name: 'rect-shape-asset-name',
          });
          return assetNameArea;
        },
        renderAssetNameTitle(group, cfg) {
          const assetNameTitle = group.addShape('text', {
            attrs: {
              text: '表名：' + cfg.id,
              textAlign: 'left',
              textBaseline: 'top',
              fill: '#333',
              x: 5,
              y: 4,
              fontSize: 9,
              cursor: 'pointer'
            },
            name: 'assetNameTitle-shape',
          });
          return assetNameTitle;
        },
        findSourceNode(pid) {
          let s = '';
          let anchorIndexLeft;
          let anchorIndexRight;
          let nodes = this.graph.getNodes();
          let depth;
          nodes.forEach(node => {
            let cfg = node.get('model');
            if (cfg.columnNames.indexOf(pid) != -1 || cfg.id == pid) {
              s = cfg.id;
              depth = cfg.depth;
              let anchorLeft = cfg.sourcePoints[pid];
              anchorIndexLeft = cfg.anchorPoints.findIndex(p => p.join() == anchorLeft.join())
              let anchorRight = cfg.targetPoints[pid];
              anchorIndexRight = cfg.anchorPoints.findIndex(p => p.join() == anchorRight.join())
              return;
            }
          });
          return {
            s,
            anchorIndexLeft,
            anchorIndexRight,
            depth
          }
        },
        findTargetNode(id) {
          let t = '';
          let anchorIndexLeft;
          let anchorIndexRight;
          let nodes = this.graph.getNodes();
          let depth;
          nodes.forEach(node => {
            let cfg = node.get('model');
            if (cfg.columnNames.indexOf(id) != -1 || cfg.id == id) {
              t = cfg.id;
              depth = cfg.depth;
              let anchorLeft = cfg.sourcePoints[id];
              anchorIndexLeft = cfg.anchorPoints.findIndex(p => p.join() == anchorLeft.join())
              let anchorRight = cfg.targetPoints[id];
              anchorIndexRight = cfg.anchorPoints.findIndex(p => p.join() == anchorRight.join())
              return;
            }
          });
          return {
            t,
            anchorIndexLeft,
            anchorIndexRight,
            depth
          };
        },
        // 生成折线随机数
        getRandomPolyLineNum() {
          let randNum =  Math.floor(Math.random() * 40);
          if (randNum < 10) {
            randNum = 10
          };
          return randNum;
        },
    },
    mounted() {

        this.initGraph();
        this.graph.data(assetColumnDetail);
        this.graph.render();
        this.graph.fitView();
        let egRequest = 
        [
          {
            id: 'NGC_QITF',
            pid: 'NGT_CILPI',
          },
          {
            id: 'NGA_CHLM',
            pid: 'NGA_CHLW',
          },
          {
            id: 'DGT_CILU',
            pid: 'NGC_QITAS',
          },
          {
            id: 'NGC_QITQ',
            pid: 'BGA_CBLS',
          },
          {
            id: 'T83_BANK_EAC_INF_S',
            pid: 'T83_EAC_INF_S',
          },
          {
            id: 'UIM_DRTB',
            pid: 'NGT_CILA',
          },
          {
            id: 'UIM_DRTE',
            pid: 'NGC_CKAO',
          },
        ];
        egRequest.forEach(eg => {
          let newSource = this.findSourceNode(eg.pid);
          let newTarget = this.findTargetNode(eg.id);
          
          // console.log('newSource', newSource);
          // console.log('newTarget', newTarget);
          let newEdge = {
            source: newSource.s,
            target: newTarget.t,
            sourceAnchor: newSource.anchorIndexLeft,
            targetAnchor: newTarget.anchorIndexRight,
            type: edgeConfig.polylineCustom(this.getRandomPolyLineNum()),
            style: {
              opacity: 1,
              stroke: '#949494',
              endArrow: {     // 连线末端的箭头，不需要可以不设置
                path: 'M 0,0 L 4,2 L 3,0 L 4,-2 Z',
                fill: '#60A8B7',
                stroke: '#949494',
              },
            }
          };
          if (newSource.depth == newTarget.depth) {
            newEdge.sourceAnchor = newSource.anchorIndexLeft;
            newEdge.targetAnchor = newTarget.anchorIndexLeft;
            newEdge.type = 'polyline'
          };
          this.graph.addItem('edge', newEdge);
        });
        this.graph.on('node:click', (evt) => {
          let item = evt.item;
          let target = evt.target;
          console.log('item', item);
          console.log('target', target);
        });
    }
}
</script>

<style lang="less">
    .asset_column_g6{
      .container{
        width: 100vw;
        height: 100vh;
      }
    }
</style>

let assetColumnDetail = 
    {
        "id": "T83_EAC_INF_S",
        "imgType": "402",
        "isOrigin": true,
        "entityId": "5FE18B81FB250E4DB7847F72F700019C",
        "children": [
            {
                "id": "T83_BANK_EAC_INF_S",
                "pid": "T83_EAC_INF_S",
                "imgType": "505",
                "isOrigin": false,
                "entityId": "5FE18B82002B00FB7EBD817F37000163",
                "columns": [
                    {
                        "id": 'c_01',
                        "columnName": "NGT_CILA"
                    },
                    {
                        "id": 'c_02',
                        "columnName": "NGA_CHLB"
                    },
                    {
                        "id": 'c_03',
                        "columnName": "NGC_CMAC"
                    },
                    {
                        "id": 'c_0dsdsd3',
                        "columnName": "NGC_CKAD"
                    },
                    {
                        "id": 'c_0feferter3',
                        "columnName": "NGC_LMOE"
                    },
                    {
                        "id": 'c_03fghghghfgh',
                        "columnName": "NGC_QITF"
                    },
                ],
                "children": [
                    {
                        "id": "ADS.PPDC_KISO_PLD",
                        "pid": "T83_BANK_EAC_INF_S",
                        "imgType": "402",
                        "entityId": "5FE18B81FB250E4DB7847F72F700019C",
                        "columns": [
                            {
                                "id": 'c_04SDSDSDSA',
                                "columnName": "UIM_DRTA"
                            },
                            {
                                "id": 'c_0SDSSD4SDSDSDSA',
                                "columnName": "UIM_DRTB"
                            },
                            {
                                "id": 'c_0ZDSDSA',
                                "columnName": "UIM_DRTC"
                            },
                        ]
                    },
                ]
            },
            {
                "id": "C83_BANK_EAC_DUI_SO",
                "pid": "T83_EAC_INF_S",
                "imgType": "505",
                "isOrigin": false,
                "entityId": "5FE18B82002B00FB7EBD817F37000163",
                "columns": [
                    {
                        "id": 'c_01',
                        "columnName": "NGT_CILG"
                    },
                    {
                        "id": 'c_02',
                        "columnName": "NGA_CHLH"
                    },
                    {
                        "id": 'c_03',
                        "columnName": "NGC_CMAI"
                    },
                    {
                        "id": 'c_0dsdsd3',
                        "columnName": "NGC_CKAJ"
                    },
                    {
                        "id": 'c_0feferter3',
                        "columnName": "NGC_LMOK"
                    },
                    {
                        "id": 'c_03fghghghfgh',
                        "columnName": "NGC_QITL"
                    },
                    {
                        "id": 'c_02',
                        "columnName": "NGA_CHLM"
                    },
                    {
                        "id": 'c_03',
                        "columnName": "NGC_CMAN"
                    },
                    {
                        "id": 'c_0dsdsd3',
                        "columnName": "NGC_CKAO"
                    },
                    {
                        "id": 'c_0feferter3',
                        "columnName": "NGC_LMOP"
                    },
                    {
                        "id": 'c_03fghghghfgh',
                        "columnName": "NGC_QITQ"
                    },
                ],
                "children": [
                    {
                        "id": "BDS.PPDC_KISO_PLD",
                        "pid": "C83_BANK_EAC_DUI_SO",
                        "entityId": "5FE18BSD81FB250ES4DB7847F72F700019C",
                        "columns": [
                            {
                                "id": 'c_04SDSDSDSA',
                                "columnName": "UIM_DRTD"
                            },
                            {
                                "id": 'c_0ZDSDXXXDSA',
                                "columnName": "UIM_DRTE"
                            },
                        ]
                    },
                ]
            },
            {
                "id": "T83_CARD_EAC_INF_S",
                "pid": "T83_EAC_INF_S",
                "imgType": "505",
                "isOrigin": false,
                "entityId": "5FE18B8200C100748364197137000173",
                "columns": [
                    {
                        "id": 'c_04',
                        "columnName": "DGT_CILR"
                    },
                    {
                        "id": 'c_05',
                        "columnName": "BGA_CBLS"
                    },
                    {
                        "id": 'c_06',
                        "columnName": "TGC_COAT"
                    },
                ]
            },
            {
                "id": "G83_SDD_EAFC_INF_SS",
                "pid": "T83_EAC_INF_S",
                "imgType": "505",
                "isOrigin": false,
                "entityId": "5FE18B8200C100748364197137000173",
                "columns": [
                    {
                        "id": 'c_04',
                        "columnName": "DGT_CILU"
                    },
                ]
            },
        ],
        "columns": [
            {
                "id": 'c_01',
                "columnName": "NGT_CILPI"
            },
            {
                "id": 'c_02',
                "columnName": "NGA_CHLW"
            },
            {
                "id": 'c_03',
                "columnName": "NGC_CMAX"
            },
            {
                "id": 'c_0dsdsd3',
                "columnName": "NGC_CKAY"
            },
            {
                "id": 'c_0feferter3',
                "columnName": "NGC_LMOZ"
            },
            {
                "id": 'c_03fghghghfgh',
                "columnName": "NGC_QITAS"
            },
        ]
    };
export default assetColumnDetail;

import G6 from '@antv/g6';

function polylineCustom(randomNum=10) {
    G6.registerEdge(
      'polyline-custom',
      {
        getPath(points) {
          const startPoint = points[0];
          const endPoint = points[1];
          return [
            ['M', startPoint.x, startPoint.y],
            ['L', startPoint.x - randomNum, startPoint.y],
            ['L', startPoint.x - randomNum, endPoint.y],
            ['L', endPoint.x, endPoint.y],
          ];
        },
        getShapeStyle(cfg) {
          const startPoint = cfg.startPoint;
          const endPoint = cfg.endPoint;
          const controlPoints = this.getControlPoints(cfg);
          let points = [startPoint]; // the start point
          // the control points
          if (controlPoints) {
            points = points.concat(controlPoints);
          }
          // the end point
          points.push(endPoint);
          const path = this.getPath(points);
          const style = Object.assign(
            {},
            G6.Global.defaultEdge.style,
            {
              path,
            },
            cfg.style,
          );
          return style;
        },
        afterDraw(cfg, group) {
          const startPoint = cfg.startPoint;
          const shape = group.get('children')[0];
          const length = shape.getTotalLength();
          shape.animate(
            (ratio) => {
              const startLen = ratio * length;
              // 计算 lineDash
              const cfg = {
                lineDash: [startLen, length - startLen],
              };
              return cfg;
            },
            {
              repeat: false, // 是否重复执行
              duration: 1000, // 一次动画持续时长
            },
          );
        },
      },
      'polyline',
    );
    return 'polyline-custom';
}

const edgeConfig = {
    polylineCustom: (randomNum) => {
        return polylineCustom(randomNum);
    }
};
export default edgeConfig;