yos_web/src/components/mindmap/project.vue

<template>
  <div style="background:#f1f2f3" id="full" :style="contentStyle">
    <img style="width: 25px; height: 25px;float: right" v-if="!fullscreen" @click="enterFullscreen" src="@/assets/icons/amplify.svg" title="全屏">
    <img style="width: 25px; height: 25px;float: right" @click="backFullscreen" v-if="fullscreen" src="@/assets/icons/reduce.svg" title="还原">
    <div id="container"></div>
    <el-drawer
        :visible.sync="drawer"
        append-to-body
        size="900px"
        :with-header="false">
      <p style="padding: 10px 0px 0px 10px">{{title}}</p>
      <competitorInfo v-if="title == '竞争对手列表'" :data="tableData"></competitorInfo>
      <customInfo v-if="title == '关联客户列表'" :data="tableData"></customInfo>
      <contractInfo v-if="title == '合同列表'" :data="tableData"></contractInfo>
      <quotationInfo v-if="title == '报价列表'" :data="tableData"></quotationInfo>
    </el-drawer>
  </div>
</template>

<script>
import competitorInfo from "@/components/mindmap/modules/competitorInfo";
import customInfo from "@/components/mindmap/modules/customInfo";
import contractInfo from "@/components/mindmap/modules/contractInfo";
import quotationInfo from "@/components/mindmap/modules/quotationInfo";
import G6 from '@antv/g6';
import axios from 'axios'
let graph;
const fittingString = (str, maxWidth, fontSize) => {
  const ellipsis = "...";
  const ellipsisLength = G6.Util.getTextSize(ellipsis, fontSize)[0];
  let currentWidth = 0;
  let res = str;
  const pattern = new RegExp("[\u4E00-\u9FA5]+"); // distinguish the Chinese charactors and letters
  str.split("").forEach((letter, i) => {
    if (currentWidth > maxWidth - ellipsisLength) return;
    if (pattern.test(letter)) {
      // Chinese charactors
      currentWidth += fontSize;
    } else {
      // get the width of single letter according to the fontSize
      currentWidth += G6.Util.getLetterWidth(letter, fontSize);
    }
    if (currentWidth > maxWidth - ellipsisLength) {
      res = `${str.substr(0, i)}${ellipsis}`;
    }
  });
  return res;
};
const ERROR_COLOR = 'red';
const getNodeConfig = (node) => {
  if (node.color) {
    return {
      basicColor: node.color,
      fontColor: '#333',
      borderColor: node.color,
      bgColor: node.color,
    };
  }
  let config = {
    basicColor: node.color,
    fontColor: '#333',
    borderColor:  node.color,
    bgColor: node.color,
  };
  switch (node.type) {
    case 'root': {
      config = {
        basicColor: node.color,
        fontColor: 'rgba(0,0,0,0.85)',
        borderColor: '#E3E6E8',
        bgColor: node.color,
      };
      break;
    }
    default:
      break;
  }
  return config;
};

const COLLAPSE_ICON = function COLLAPSE_ICON(x, y, r) {
  return [
    ['M', x - r, y],
    ['a', r, r, 0, 1, 0, r * 2, 0],
    ['a', r, r, 0, 1, 0, -r * 2, 0],
    ['M', x - r + 4, y],
    ['L', x - r + 2 * r - 4, y],
  ];
};
const EXPAND_ICON = function EXPAND_ICON(x, y, r) {
  return [
    ['M', x - r, y],
    ['a', r, r, 0, 1, 0, r * 2, 0],
    ['a', r, r, 0, 1, 0, -r * 2, 0],
    ['M', x - r + 4, y],
    ['L', x - r + 2 * r - 4, y],
    ['M', x - r + r, y - r + 4],
    ['L', x, y + r - 4],
  ];
};
const nodeBasicMethod = {
  createNodeBox: (group, config, w, h, isRoot) => {
    console.log(config,'--')
    /* 最外面的大矩形 */
    const container = group.addShape('rect', {
      attrs: {
        x: 0,
        y: 0,
        // fill: config.bgColor,
        // stroke: config.borderColor,
        width: w,
        height: h,
      },
      // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
      name: 'big-rect-shape',
    });
    if (!isRoot) {
      /* 左边的小圆点 */
      group.addShape('circle', {
        attrs: {
          x: 3,
          y: h / 2,
          r: 0,
          // fill: config.basicColor,
        },
        // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
        name: 'left-dot-shape',
      });
    }
    /* 矩形 */
    group.addShape('rect', {
      attrs: {
        x: 3,
        y: 0,
        width: w - 19,
        height: h,
        // fill: config.basicColor,
        // stroke: config.borderColor,
        radius: 2,
        cursor: 'pointer',
      },
      // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
      name: 'rect-shape',
    });

    /* 左边的粗线 */
    group.addShape('rect', {
      attrs: {
        x: 3,
        y: 0,
        width:0,
        height: h,
        // fill: config.basicColor,
        radius: 1.5,
      },
      // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
      name: 'left-border-shape',
    });
    return container;
  },
  /* 生成树上的 marker */
  createNodeMarker: (group, collapsed, x, y) => {
    group.addShape('circle', {
      attrs: {
        x,
        y,
        r: 13,
        fill: 'rgba(47, 84, 235, 0.05)',
        opacity: 0,
        zIndex: -2,
      },
      // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
      name: 'collapse-icon-bg',
    });
    group.addShape('marker', {
      attrs: {
        x,
        y,
        r: 7,
        symbol: collapsed ? EXPAND_ICON : COLLAPSE_ICON,
        stroke: 'rgba(0,0,0,0.25)',
        fill: 'rgba(0,0,0,0)',
        lineWidth: 1,
        cursor: 'pointer',
      },
      // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
      name: 'collapse-icon',
    });
  },
  afterDraw: (cfg, group) => {
    /* 操作 marker 的背景色显示隐藏 */
    const icon = group.find((element) => element.get('id') === 'collapse-icon');
    if (icon) {
      const bg = group.find((element) => element.get('id') === 'collapse-icon-bg');
      icon.on('mouseenter', () => {
        bg.attr('opacity', 1);
        graph.get('canvas').draw();
      });
      icon.on('mouseleave', () => {
        bg.attr('opacity', 0);
        graph.get('canvas').draw();
      });
    }
    /* ip 显示 */
    const ipBox = group.find((element) => element.get('id') === 'ip-box');
    if (ipBox) {
      /* ip 复制的几个元素 */
      const ipLine = group.find((element) => element.get('id') === 'ip-cp-line');
      const ipBG = group.find((element) => element.get('id') === 'ip-cp-bg');
      const ipIcon = group.find((element) => element.get('id') === 'ip-cp-icon');
      const ipCPBox = group.find((element) => element.get('id') === 'ip-cp-box');

      const onMouseEnter = () => {
        ipLine.attr('opacity', 1);
        ipBG.attr('opacity', 1);
        ipIcon.attr('opacity', 1);
        graph.get('canvas').draw();
      };
      const onMouseLeave = () => {
        ipLine.attr('opacity', 0);
        ipBG.attr('opacity', 0);
        ipIcon.attr('opacity', 0);
        graph.get('canvas').draw();
      };
      ipBox.on('mouseenter', () => {
        onMouseEnter();
      });
      ipBox.on('mouseleave', () => {
        onMouseLeave();
      });
      ipCPBox.on('mouseenter', () => {
        onMouseEnter();
      });
      ipCPBox.on('mouseleave', () => {
        onMouseLeave();
      });
      ipCPBox.on('click', () => { });
    }
  },
  setState: (name, value, item) => {
    const hasOpacityClass = [
      'ip-cp-line',
      'ip-cp-bg',
      'ip-cp-icon',
      'ip-cp-box',
      'ip-box',
      'collapse-icon-bg',
    ];
    const group = item.getContainer();
    const childrens = group.get('children');
    graph.setAutoPaint(false);
    if (name === 'emptiness') {
      if (value) {
        childrens.forEach((shape) => {
          if (hasOpacityClass.indexOf(shape.get('id')) > -1) {
            return;
          }
          shape.attr('opacity', 0.4);
        });
      } else {
        childrens.forEach((shape) => {
          if (hasOpacityClass.indexOf(shape.get('id')) > -1) {
            return;
          }
          shape.attr('opacity', 1);
        });
      }
    }
    graph.setAutoPaint(true);
  },
};

G6.registerNode('card-node', {
  options: {
    style: {
      stroke: '#ccc',
    },
  },
  draw: (cfg, group) => {

    const config = getNodeConfig(cfg);
    const isRoot = cfg.dataType === 'root';
    const nodeUrl = cfg.nodeUrl;
    /* the biggest rect */
    const container = nodeBasicMethod.createNodeBox(group, config, 243, 64 + Number(25*cfg.infoSize) , isRoot);

    if (cfg.dataType !== 'root') {
      /* the type text */
      group.addShape('text', {
        attrs: {
          text: cfg.dataType,
          x: 3,
          y: -10,
          fontSize: 12,
          textAlign: 'left',
          textBaseline: 'middle',
          fill: 'rgba(0,0,0,0.65)',
        },
        // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
        name: 'type-text-shape',
      });
    }

    /* name */
    group.addShape('text', {
      attrs: {
        text: cfg.id,
        x: 19,
        y: 19,
        fontSize: 14,
        fontWeight: 700,
        textAlign: 'left',
        textBaseline: 'middle',
        fill: config.fontColor,
        cursor: 'pointer',
      },
      // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
      name: 'name-text-shape',
    });

    /* the description text */
    group.addShape('text', {
      attrs: {
        text: fittingString(cfg.value, 243 - 50, 14),
        x: 19,
        y: 45,
        fontSize: 14,
        textAlign: 'left',
        textBaseline: 'middle',
        fill: config.fontColor,
        cursor: 'pointer',
      },
      // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
      name: 'bottom-text-shape',
    });
    if (cfg.infoSize > 0) {
      Object.keys(cfg.info).forEach((key,index) => {
        console.log(key, cfg.info[key],index);
        group.addShape('text', {
          attrs: {
            text: fittingString(String(cfg.info[key]), 243 - 50, 14),
            x: 19,
            y: 65 + (25*index) ,
            fontSize: 12,
            textAlign: 'left',
            textBaseline: 'middle',
            fill: config.fontColor,
            cursor: 'pointer',
          },
          // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
          name: 'bottom-text-shape',
        });
      });
    }
    if (nodeUrl) {
      group.addShape('text', {
        attrs: {
          x: 191,
          y: 62,
          text: '⇢',
          fill: '#fff',
          fontSize: 18,
        },
        // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
        name: 'error-text-shape',
      });
    }

    const hasChildren = cfg.children && cfg.children.length > 0;
    if (hasChildren) {
      nodeBasicMethod.createNodeMarker(group, cfg.collapsed, 236, 32);
    }
    return container;
  },
  afterDraw: nodeBasicMethod.afterDraw,
  setState: nodeBasicMethod.setState,
});
export default {
  props:['id','contentStyle'],
  components:{competitorInfo,customInfo,contractInfo,quotationInfo},
  data () {
    return {
      fullscreen:false,
      drawer:false,
      title:'',
      tableData: []
    }
  },
  mounted () {
    // this.getData()
    document.addEventListener('fullscreenchange', this.handleFullscreenChange);
    document.addEventListener('mozfullscreenchange', this.handleFullscreenChange);
    document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange);
    document.addEventListener('MSFullscreenChange',this.handleFullscreenChange)
  },
  methods:{
    createMenu (array) {
      var that = this
      let arr = []
      const HASLINKS = ['关联客户','竞争对手','报价单有效数','合同有效数','报价','合同']
      function convertToElementTree(node) {
        // 新节点
        var elNode = {
          id: node['name'],
          nodeid:node['id'],
          info:node['info']?node['info']:{},
          infoSize:node['infoSize']?node['infoSize']:1,
          value:node['labor']?node['labor'] !== node['name']?node['labor']:'-':'-',
          data:node['data'],
          color:node['color'],
          children: [],
          nodeUrl:HASLINKS.includes(node['name'])?'123':null
        }

        if (node.children && node.children.length > 0) {
          // 如果存在子节点
          for (var index = 0; index < node.children.length; index++) {
          // 遍历子节点, 把每个子节点看做一颗独立的树, 传入递归构造子树, 并把结果放回到新node的children中
          elNode.children.push(convertToElementTree(node.children[index]));
          }
        }
        return elNode;
      }
      array.forEach((element) => {
        arr.push(convertToElementTree(element))
      });
      return arr
    },
    async getData () {
      const res = await this.$api.requested({
        "id": 20230619141904,
        "content": {
          "sa_projectid": this.id
        }
      })

      const container = document.getElementById('container');
      const width = container.scrollWidth;
      const height = container.scrollHeight - 50 || 500;
      const contextMenu = new G6.Menu({
        getContent(evt) {
          let info = evt.item._cfg.model.info
          let header;
          let listItems = Object.keys(info).map((key) => `<li>${info[key]}</li>`).join('');
          return `
          <h3>${evt.item._cfg.model.id}</h3>
          <ul>
            ${listItems}
          </ul>`;
        },
        handleMenuClick: (target, item) => {
          console.log(target, item);
        },
        // offsetX and offsetY include the padding of the parent container
        // 需要加上父级容器的 padding-left 16 与自身偏移量 10
        offsetX: 16 + 10,
        // 需要加上父级容器的 padding-top 24 、画布兄弟元素高度、与自身偏移量 10
        offsetY: 0,
        // the types of items that allow the menu show up
        // 在哪些类型的元素上响应
        itemTypes: ['node', 'edge', 'canvas'],
      });

      const graph = new G6.TreeGraph({
        container: 'container',
        width,
        height,
        linkCenter: true,
        fitCenter: true,
        modes: {
          default: ['drag-canvas','zoom-canvas','collapse-expand','drag-node', 'lasso-select'],
        },
        defaultNode: {
          /* node type, the priority is lower than the type in the node data */
          type: 'card-node',
        },
        defaultEdge: {
          type: 'cubic-horizontal',
        },
        layout: {
          type: 'dendrogram',
          direction: 'RL',
          nodeSep: 100,
          rankSep: 350,
          radial: true,
        },
      });

      graph.node(function (node) {
        return {
          label: node.id,
        };
      });

      graph.data(this.createMenu([res.data])[0]);
      graph.render();
      graph.fitView();
      graph.on('node:click', evt => {
        const item = evt.item;
        console.log(item._cfg.model,'点击列表')
        this.tableData = item._cfg.model.data
        this.title = item._cfg.model.label + '列表'
        if (item._cfg.model.label == '竞争对手' || item._cfg.model.label == '关联客户' || item._cfg.model.label == '报价' || item._cfg.model.label == '合同'){
          this.drawer = true
        }
      })
      if (typeof window !== 'undefined')
        window.onresize = () => {
          if (!graph || graph.get('destroyed')) return;
          if (!container || !container.scrollWidth || !container.scrollHeight) return;
          graph.changeSize(container.scrollWidth, container.scrollHeight);
        };

      if (this.$route.query.portrait === 'jzds'){
        res.data.children.forEach(item=>{
          if (item.name === '竞争对手'){
            this.tableData = item.data
            this.title = '竞争对手列表'
          }
        })
        this.drawer = true
        this.$route.query.portrait = ''
      }else if (this.$route.query.portrait === 'glkh'){
        res.data.children.forEach(item=>{
          if (item.name === '关联客户'){
            this.tableData = item.data
            this.title = '关联客户列表'
          }
        })
        this.drawer = true
        this.$route.query.portrait = ''
      }else if (this.$route.query.portrait === 'bj'){
        res.data.children.forEach(item=>{
          if (item.name === '报价'){
            this.tableData = item.data
            this.title = '报价列表'
          }
        })
        this.drawer = true
        this.$route.query.portrait = ''
      }else if (this.$route.query.portrait === 'ht'){
        res.data.children.forEach(item=>{
          if (item.name === '合同'){
            this.tableData = item.data
            this.title = '合同列表'
          }
        })
        this.drawer = true
        this.$route.query.portrait = ''
      }
    },
    enterFullscreen () {
      /* 获取(<html>)元素以全屏显示页面 */
      const full = document.getElementById('full')
      if (full.RequestFullScreen) {
        full.RequestFullScreen()
        //兼容Firefox
      } else if (full.mozRequestFullScreen) {
        full.mozRequestFullScreen()
        //兼容Chrome, Safari and Opera等
      } else if (full.webkitRequestFullScreen) {
        full.webkitRequestFullScreen()
        //兼容IE/Edge
      } else if (full.msRequestFullscreen) {
        full.msRequestFullscreen()
      }
    },
    handleFullscreenChange () {
      if (document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
        // 全屏模式激活

        console.log('全屏模式已激活');
        this.fullscreen = true
      } else {
        // 全屏模式退出
        this.fullscreen = false
        console.log('全屏模式已退出');
      }
    },
    /*全屏还原*/
    backFullscreen(){
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
    },
  },
}

</script>
<style>
#container{
  width: 100vw;
  height:100vh;
  position: relative;
}
#contextMenu {
  position: absolute;
  list-style-type: none;
  padding: 10px 8px;
  left: -150px;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #e2e2e2;
  border-radius: 4px;
  font-size: 12px;
  color: #545454;
}
#contextMenu li {
  cursor: pointer;
  list-style-type:none;
  list-style: none;
  margin-left: 0px;
}
#contextMenu li:hover {
  color: #aaa;
}
</style>