w-vue-middle/dataChainSource/biQuota/dataverification/components/designertackle/config.js

统一公共服务组件

/*
 * @Author: Jason Liu
 * @Date: 2022-06-09 16:11:16
 * @Desc: 组件配置
 */
import '@antv/x6-vue-shape';

const { Graph, Shape, Addon } = require('@antv/x6');

import card from './package/card.vue';

export const controlsList = [
  {
    id: 'basic',
    key: 'basic',
    name: $t('基础组件'),
    isGroup: true,
    hasChild: true,
    type: 'sys',
    maps: ['job', 'flow'],
  },
  {
    id: 'inputcomponent',
    key: 'inputcomponent',
    name: $t('输入组件'),
    isGroup: true,
    hasChild: true,
    type: 'sys',
    maps: ['transform'],
  },
  {
    id: 'outputcomponent',
    key: 'outputcomponent',
    name: $t('输出组件'),
    isGroup: true,
    hasChild: true,
    type: 'sys',
    maps: ['transform'],
  },
  {
    id: 'conversioncomponent',
    key: 'conversioncomponent',
    name: $t('转换组件'),
    isGroup: true,
    hasChild: true,
    type: 'sys',
    maps: ['job'],
  },
  {
    id: 'job',
    key: 'job',
    name: $t('作业列表'),
    isGroup: true,
    hasChild: true,
    maps: ['job'],
  },
  {
    id: 'transform',
    key: 'transform',
    name: $t('转换列表'),
    isGroup: true,
    hasChild: true,
    maps: ['job'],
  },
  {
    id: 'flow',
    key: 'flow',
    name: $t('集成作业'),
    isGroup: true,
    hasChild: true,
    maps: ['flow'],
  },
];

/**
 * @Author: Jason Liu
 * @description: 连线节点的属性
 */
export const ports = {
  groups: {
    top: {
      position: 'top',
      attrs: {
        circle: {
          r: 4,
          magnet: true,
          stroke: '#5F95FF',
          strokeWidth: 1,
          fill: '#fff',
          style: { visibility: 'hidden' },
        },
      },
    },
    right: {
      position: 'right',
      attrs: {
        circle: {
          r: 4,
          magnet: true,
          stroke: '#5F95FF',
          strokeWidth: 1,
          fill: '#fff',
          style: { visibility: 'hidden' },
        },
      },
    },
    bottom: {
      position: 'bottom',
      attrs: {
        circle: {
          r: 4,
          magnet: true,
          stroke: '#5F95FF',
          strokeWidth: 1,
          fill: '#fff',
          style: { visibility: 'hidden' },
        },
      },
    },
    left: {
      position: 'left',
      attrs: {
        circle: {
          r: 4,
          magnet: true,
          stroke: '#5F95FF',
          strokeWidth: 1,
          fill: '#fff',
          style: { visibility: 'hidden' },
        },
      },
    },
  },
  items: [{ group: 'top' }, { group: 'right' }, { group: 'bottom' }, { group: 'left' }],
};

/**
 * @Author: Jason Liu
 * @description: 连线特性
 */
export const lineoption = {
  attrs: {
    line: {
      stroke: '#A2B1C3',
      strokeWidth: 2,
      targetMarker: { name: 'block', width: 12, height: 8 },
    },
  },
  zIndex: 0,
};

/**
 * @Author: Jason Liu
 * @description: 控件特性
 */
export const registerNodes = [
  {
    name: 'custom-rect',
    option: {
      inherit: 'rect',
      width: 66,
      height: 36,
      attrs: {
        body: {
          strokeWidth: 1,
          stroke: '#5F95FF',
          fill: '#EFF4FF',
          rx: 20,
          ry: 26,
        },
        text: {
          fontSize: 12,
          fontWeight: 500,
          fill: '#262626',
        },
      },
      ports: { ...ports },
    },
  },
  {
    name: 'custom-input',
    option: {
      inherit: 'vue-shape',
      width: 160,
      height: 36,
      component: {
        template: `<card />`,
        components: {
          card,
        },
      },
      ports: { ...ports },
    },
  },
  {
    name: 'custom-polygon',
    option: {
      inherit: 'polygon',
      width: 66,
      height: 36,
      attrs: {
        body: {
          strokeWidth: 1,
          stroke: '#5F95FF',
          fill: '#EFF4FF',
          refPoints: '0,10 10,0 20,10 10,20',
        },
        text: {
          fontSize: 12,
          fontWeight: 500,
          fill: '#262626',
        },
      },
      ports: { ...ports },
    },
  },
];

//初始化任务节点
registerNodes.forEach((node) => {
  Graph.registerNode(node.name, node.option, true);
});