foton-laws-system-front/src/pages/knowledgeGraph/components/knowledgeGraph.vue

<template>
  <div ref="wrap">
    <div id="container"></div>
  </div>
</template>

<script>
import G6 from '@antv/g6';
export default {
  name: 'knowledgeGraph',
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      graphData: {},
      graph: null,
    }
  },
  watch: {
    // data:{
    //   immediate: true,
    //   handler: (val, newVal) => {
    //   }
    // }
    data(val, newVal) {
      this.graphData = val
      this.changeGraphData(val)
    }
  },
  methods: {
    renderGraph() {
      G6.registerNode(
        'tree-node',
        {
          drawShape: function drawShape(cfg, group) {
            const level = parseInt(cfg.level)
            const nodeType = cfg.nodeType
            if (nodeType === 'ROOT') {
              const circle = group.addShape('circle', {
                attrs: {
                  fill: '#CD7326'
                  // stroke: '#666',
                },
                name: 'circle-shape',
              });
              const content = cfg.name ? cfg.name.replace(/(.{19})/g, '$1\n') : ''
              const text = group.addShape('text', {
                attrs: {
                  text: content,
                  x: 0,
                  y: 0,
                  textAlign: 'center',
                  textBaseline: 'middle',
                  fill: '#fff',
                },
                name: 'text-shape',
              });
              const bbox = text.getBBox();
              const hasChildren = cfg.children && cfg.children.length > 0;
              let marker
              if (hasChildren) {
                marker = group.addShape('marker', {
                  attrs: {
                    x: bbox.maxX + 16,
                    y: 0,
                    r: 6,
                    symbol: cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse,
                    stroke: '#666',
                    lineWidth: 2,
                  },
                  name: 'collapse-icon',
                });
              }
              circle.attr({
                x: 0,
                y: 0,
                r: (bbox.width + 12) / 2,
              });
            } else {
              const rect = group.addShape('rect', {
                attrs: {
                  fill: '#fff',
                  // stroke: '#666',
                },
                name: 'rect-shape',
              });
              const content = cfg.name ? cfg.name.replace(/(.{19})/g, '$1\n') : ''
              const text = group.addShape('text', {
                attrs: {
                  text: content,
                  x: 0,
                  y: 0,
                  textAlign: 'center',
                  textBaseline: 'middle',
                  fill: '#fff',
                },
                name: 'text-shape',
              });
              const bbox = text.getBBox();
              const hasChildren = cfg.children && cfg.children.length > 0;
              let marker
              if (hasChildren) {
                marker = group.addShape('marker', {
                  attrs: {
                    x: bbox.maxX + 16,
                    y: 0,
                    r: 6,
                    symbol: cfg.collapsed ? G6.Marker.expand : G6.Marker.collapse,
                    stroke: '#666',
                    lineWidth: 2,
                  },
                  name: 'collapse-icon',
                  nodeStateStyles: {
                    selected: {
                      fill: 'steelblue'
                    }
                  }
                });
              }
              rect.attr({
                x: bbox.minX - 6,
                y: bbox.minY - 6,
                width: bbox.width + 12,
                height: bbox.height + 12,
                radius: (bbox.height + 12) / 2
              });
              // 自定义层级颜色
              if (nodeType === 'BWH') {
                rect.attr({
                  fill: '#1C98B8'
                });
              } else if (nodeType === 'FBW') {
                rect.attr({
                  fill: '#5165D4'
                });
              } else if (nodeType === 'GROUP') {
                rect.attr({
                  fill: '#E23335'
                });
              } else if (nodeType === 'STAND') {
                rect.attr({
                  fill: '#ADAAA1'
                });
              }
            }

            return group;
          },
        },
        'single-node',
      );

      this.graph = new G6.TreeGraph({
        container: 'container',
        width: this.$refs['wrap'].scrollWidth,
        height: this.$refs['wrap'].scrollHeight,
        modes: {
          default: [
            {
              type: 'collapse-expand',
              onChange: function onChange(item, collapsed) {
                const data = item.get('model');
                const icon = item.get('group').find((element) => element.get('name') === 'collapse-icon');
                if (collapsed) {
                  icon.attr('symbol', G6.Marker.expand);
                } else {
                  icon.attr('symbol', G6.Marker.collapse);
                }
                data.collapsed = collapsed;
                return true;
              },
              shouldBegin: (e) => {
                const target = e.target
                const nodeType = target.cfg.name
                if (nodeType === 'collapse-icon') return true;
                return false;
              }
            },
            'drag-canvas',
            'zoom-canvas',
          ],
        },
        defaultNode: {
          type: 'tree-node',
          anchorPoints: [
            [0, 0.5],
            [1, 0.5],
          ],
        },
        defaultEdge: {
          type: 'cubic-horizontal',
          style: {
            stroke: '#A3B1BF',
          },
        },
        layout: {
          type: 'compactBox',
          direction: 'LR',
          getId: function getId(d) {
            return d.id;
          },
          getHeight: function getHeight() {
            return 16;
          },
          getWidth: function getWidth() {
            return 16;
          },
          getVGap: function getVGap() {
            return 20;
          },
          getHGap: function getHGap() {
            return 80;
          },
        },
      });
      let graphData = this.graphData
      G6.Util.traverseTree(graphData, function(item) {
        const data = item.data || {}
        item.id = item.nodeId;
        item.name = item.nodeName
        item.nodeType = data.menuType
      });
      this.graph.data(graphData);
      this.graph.render();
      this.graph.fitView();
      this.handleGraphNodeClickEvent(this.graph)
      this.handleGraphEdgeClickEvent(this.graph)
      this.handleGraphDraw(this.graph)
    },
    changeGraphData(val) {
      let graphData = val
      G6.Util.traverseTree(graphData, function(item) {
        const data = item.data || {}
        item.id = item.nodeId;
        item.name = item.nodeName
        item.nodeType = data.menuType
      });
      this.graph.changeData(graphData)
      this.graph.fitView();
    },
    handleGraphNodeClickEvent(graph) {
      // 点击节点
      graph.on('node:click', (e) => {
        // 先将所有当前是 click 状态的节点置为非 click 状态
        const clickNodes = graph.findAllByState('node', 'click');
        clickNodes.forEach((cn) => {
          graph.setItemState(cn, 'click', false);
        });
        const nodeItem = e.item; // 获取被点击的节点元素对象
        this.$emit('nodeClick', nodeItem)

        graph.setItemState(nodeItem, 'click', true); // 设置当前节点的 click 状态为 true
      });
    },
    handleGraphDraw(graph) {
      // graph.on('beforelayout', (cfg, group) => {
      //   this.$nextTick(() => {
      //     this.graph.zoom(0.5);
      //   })
      // })
    },
    handleGraphEdgeClickEvent(graph) {
      // 点击边
      graph.on('edge:click', (e) => {
        // 先将所有当前是 click 状态的边置为非 click 状态
        const clickEdges = graph.findAllByState('edge', 'click');
        clickEdges.forEach((ce) => {
          graph.setItemState(ce, 'click', false);
        });
        const edgeItem = e.item; // 获取被点击的边元素对象
        graph.setItemState(edgeItem, 'click', true); // 设置当前边的 click 状态为 true
        this.$emit('edgeClick', edgeItem)
      });
    },
    destoryGraph() {
      this.graph.destroy()
    }
  },
  mounted() {
    this.renderGraph()
  },
  beforeDestroy() {
    this.destoryGraph()
  }
}
</script>

<style lang="less" scoped>
  #container {
    width: 100%;
    height: 100%;
  }
</style>