easy-gant-beta v0.0.4

项目说明

项目进度跟踪可视化插件

下载依赖

npm install easy-gant yarn add easy-gant

API及配置介绍

data

传入的数据

数据格式如下：

{
  title: 'V9E-MTN',            名称*
  level: 1,                    层级*
  expanded: true,              是否展开*
  key: '0',                    唯一键*
  taskStartTime: '2024-2-27',  开始时间*
  taskEndTime: '2024-3-2',     结束时间*
  children: [],                子集*
  process: 0,                  内部进度*
  startGroup: [                连接线首关联*
    ['1', '2'],                首FIRST
    ['1'],                     尾FINAL
  ],              
  endGroup: [                  连接线尾关联*
    ['1'],                     首FIRST
    ['1'],                     尾FINAL
  ],                
  residences: 'Tom',           拥有者*
  ...                          其他定制属性
}

line

{
  dashedLine: {           虚线配置
    color: 'green',       颜色
    dash: true,           是否虚线
    width: 2,
  },
  color: '#0f97b3',       连线颜色
  lineWidth: 3,           连线宽度
  lightColor: '#0f97b3',  发光颜色
  showKey: false,         展示线key
  process: {              渠道
    color: 'linear-gradient(135deg, #001f3f, #0088a9, #00c9a7, #92d5c6, #ebf5ee)',
    fontSize: 14,
    showOwner: true,        展示名称
    fontColor: '#000',      字体颜色
    fontFamily: 'cursive',  字体
    lightColor: '#0088a9',  发光颜色
    cloud: {                滑块
      color: '#0f97b3',
      maskColor: 'rgba(0,0,0,0.3)'
    }
  }
}

schema

表单配置数据如下，通过json配置的形式生成form表单

{
  type: 'array',                    数据类型
  title: '计划周期',                 表单名称
  'g-field': 'RangePicker',         组件类型
  'g-required': true,               是否必填
  'g-status': 'edit',               状态
  rules: {                          校验规则
    message: '请选择项目周期'
  },
  'g-styles': { width: '100%' },    样式
  'g-props': {                      组件原生props
    format: 'YYYY-MM-DD',
    allowClear: true,
  }
}

treeDatas 表单所用到的枚举键值对

以下为内置配置

const defaultSchema = {
  type: 'object',
  layout: {
    labelCol: { span: 4 },
    wrapperCol: { span: 20 },
  },
  properties: {
    title: {
      type: 'string',
      title: '任务名称',
      'g-field': 'Input',
      'g-required': true,
      'g-status': 'edit',
      rules: {
        message: '请填写任务名称'
      },
      'g-props': {
        allowClear: true,
      }
    },
    residence: {
      type: 'string',
      title: '负责人',
      'g-field': 'Select',
      'g-required': true,
      'g-status': 'edit',
      'g-treeDatas': 'residences',
      rules: {
        message: '请选择负责人'
      },
      'g-props': {
        allowClear: true,
      }

    },
    taskTime: {
      type: 'array',
      title: '计划周期',
      'g-field': 'RangePicker',
      'g-required': true,
      'g-status': 'edit',
      rules: {
        message: '请选择项目周期'
      },
      'g-styles': { width: '100%' },
      'g-props': {
        format: 'YYYY-MM-DD',
        allowClear: true,
      }
    }
  },
};

onChange事件

所有操作都归类于一个change事件监听，通过changePath区分

popover

popover显示的内容可以自定义

临时假数据

可以用下方数据充当数据源体验

const data = [
  {
    title: 'V9E-MTN', level: 1, process: 45, startGroup: [['1', '2'], []], endGroup: [[], ['1']], expanded: true, key: '0', taskStartTime: '2024-2-27', taskEndTime: '2024-3-2', children: [
      {
        title: 'FP fingerprint', level: 2, process: 0,  expanded: false, key: '1', taskStartTime: '2024-2-27', taskEndTime: '2024-3-2', children: [
          { title: 'FP face swiping', level: 3, process: 0, expanded: false, key: '5', taskStartTime: '2024-2-27', taskEndTime: '2024-3-2' },
          { title: 'FP face swiping', level: 3, process: 0, expanded: false, key: '6', taskStartTime: '2024-2-26', taskEndTime: '2024-3-1' },
          { title: 'FP face swiping', level: 3, process: 0, expanded: false, key: '7', taskStartTime: '2024-2-26', taskEndTime: '2024-2-28' },
          { title: 'FP face swiping', level: 3, process: 0, expanded: false, key: '8', taskStartTime: '2024-2-25', taskEndTime: '2024-2-27' },
          { title: 'FP face swiping', level: 3, process: 0, expanded: false, key: '9', taskStartTime: '2024-2-26', taskEndTime: '2024-2-29' },
          { title: 'FP face swiping', level: 3, process: 0, expanded: false, key: '10', taskStartTime: '2024-2-27', taskEndTime: '2024-3-5' },
          { title: 'FP face swiping', level: 3, process: 0, expanded: false, key: '11', taskStartTime: '2024-2-28', taskEndTime: '2024-3-4' },
          { title: 'FP face swiping', level: 3, process: 0, expanded: false, key: '12', taskStartTime: '2024-2-24', taskEndTime: '2024-2-27' },
          { title: 'FP face swiping', level: 3, process: 0, expanded: false, key: '13', taskStartTime: '2024-2-28', taskEndTime: '2024-3-2' },
          { title: 'FP face swiping', level: 3, process: 0, expanded: false, key: '14', taskStartTime: '2024-2-24', taskEndTime: '2024-2-27' },
          { title: 'FP face swiping', level: 3, process: 0, expanded: false, key: '15', taskStartTime: '2024-2-24', taskEndTime: '2024-2-27' },
          { title: 'FP face swiping', level: 3, process: 0, expanded: false, key: '16', taskStartTime: '2024-2-24', taskEndTime: '2024-2-27' },
          { title: 'FP face swiping', level: 3, process: 0, expanded: false, key: '17', taskStartTime: '2024-2-24', taskEndTime: '2024-2-27' },
          { title: 'FP face swiping', level: 3, process: 0, expanded: false, key: '18', taskStartTime: '2024-2-24', taskEndTime: '2024-2-27' },
          { title: 'FP face swiping', level: 3, process: 0, expanded: false, key: '19', taskStartTime: '2024-2-24', taskEndTime: '2024-2-27' },
          { title: 'FP face swiping', level: 3, process: 0, expanded: false, key: '20', taskStartTime: '2024-2-24', taskEndTime: '2024-2-27' },
          { title: 'FP face swiping', level: 3, process: 0, expanded: false, key: '21', taskStartTime: '2024-2-24', taskEndTime: '2024-2-27' },
          { title: 'FP face swiping', level: 3, process: 0, expanded: false, key: '22', taskStartTime: '2024-2-24', taskEndTime: '2024-2-27' },
          { title: 'FP face swiping', level: 3, process: 0, expanded: false, key: '23', taskStartTime: '2024-2-24', taskEndTime: '2024-2-27' },
          { title: 'FP face swiping', level: 3, process: 0, expanded: false, key: '24', taskStartTime: '2024-2-24', taskEndTime: '2024-2-27' },
          { title: 'FP face swiping', level: 3, process: 0, expanded: false, key: '25', taskStartTime: '2024-2-24', taskEndTime: '2024-2-27' },
          { title: 'FP face swiping', level: 3, process: 0, expanded: false, key: '26', taskStartTime: '2024-2-24', taskEndTime: '2024-2-27' },
          { title: 'FP face swiping', level: 3, process: 0, expanded: false, key: '27', taskStartTime: '2024-2-24', taskEndTime: '2024-2-27' },
          { title: 'FP face swiping', level: 3, process: 0, expanded: false, key: '28', taskStartTime: '2024-2-24', taskEndTime: '2024-2-27' },
          { title: 'FP face swiping', level: 3, process: 0, expanded: false, key: '29', taskStartTime: '2024-2-24', taskEndTime: '2024-8-27' },
        ]
      }
    ],
  },
  {
    title: 'V93-BCSC-Bcare', process: 3, key: '2', level: 1,  taskStartTime: '2024-2-27', taskEndTime: '2024-3-2', residence: 'Athena', expanded: true
  }
];

const residences = [
    { value: 'Athena', label: 'Athena', },
    { value: 'martha', label: 'martha', },
    { value: 'Adam', label: 'Adam', },
    { value: 'Christopher', label: 'Christopher'},
    { value: 'George', label: 'George', },
    { value: 'Jack', label: 'Jack', },
    { value: 'Jason', label: 'Jason', },
];

const treeDatas = { residences };

const line = {
  dashedLine: { // 虚线配置
    color: 'green', // 颜色
    dash: true, // 是否虚线
    width: 2,
  },
  color: '#0f97b3', // 连线颜色
  lineWidth: 3, // 连线宽度
  lightColor: '#0f97b3', // 发光颜色
  showKey: false, // 展示线的key
  process: {
    color: 'linear-gradient(135deg, #001f3f, #0088a9, #00c9a7, #92d5c6, #ebf5ee)',
    fontSize: 14,
    showOwner: true, // 展示名称
    fontColor: '#000',
    fontFamily: 'cursive',
    lightColor: '#0088a9',
    cloud: {
      color: '#0f97b3',
      maskColor: 'rgba(0,0,0,0.3)'
    }
  }
}