react-jsgant
v1.26.4
Published
react-jsgant
Maintainers
shi_dnfyxmsReadme
项目说明
项目进度跟踪可视化插件
下载依赖
npm install react-jsgant
yarn add react-jsgantAPI 及配置介绍
data
传入的数据
数据格式如下：
const treeDataInfo = [
{
title: 'PIMOS-6818 策略组合池提供增加T0基金及底层货基标识查询-管理端新增字段展示',
residence: 'sjd',
level: 1,
process: 20,
expanded: false,
key: 0,
chargePerson: ['Jason'],
taskStartTime: '2025-8-11',
taskEndTime: '2025-8-14',
},
{
title: 'PIMOS-6813 海外结构化产品流程优化-前端调整',
level: 1,
residence: 'sjd/syjz',
process: 0,
expanded: true,
key: 1,
chargePerson: ['Jason'],
taskStartTime: '2025-8-13',
taskEndTime: '2025-8-31',
children: [
{
title: '一 海外结构化产品入库流程优化',
level: 2,
residence: 'sjd/syjz',
process: 0,
expanded: true,
key: 11,
chargePerson: ['Jason'],
taskStartTime: '2025-8-13',
taskEndTime: '2025-8-23',
children: [
{
title: '1.1 入库流程拆分',
level: 3,
residence: 'syjz',
process: 0,
expanded: false,
key: 111,
chargePerson: ['Jason'],
taskStartTime: '2025-8-13',
taskEndTime: '2025-8-16',
},
{
title: '1.2 QQT结构化产品入库流程优化（圆：海外结构化产品入库流程）',
level: 3,
residence: 'sjd',
process: 0,
expanded: false,
key: 112,
chargePerson: ['Jason'],
taskStartTime: '2025-8-13',
taskEndTime: '2025-8-17',
},
{
title: '1.3.1 线下结构化产品选择',
level: 3,
deps: [
{ target: 114, type: 'LL' },
{ target: 114, type: 'RR' },
{ target: 2, type: 'LR' },
{ target: 2, type: 'RL' },
],
residence: 'sjd',
process: 40,
expanded: false,
key: 113,
chargePerson: ['Jason'],
taskStartTime: '2025-8-17',
taskEndTime: '2025-8-20',
},
{
title: '1.3.2 线下结构化单产品录入',
residence: 'sjd',
level: 3,
process: 0,
expanded: false,
key: 114,
chargePerson: ['Jason'],
taskStartTime: '2025-8-20',
taskEndTime: '2025-8-23',
}
]
},
{
title: '二 海外结构化产品修改流程优化',
residence: 'sjd',
level: 2,
process: 0,
expanded: false,
key: 12,
chargePerson: ['Jason'],
taskStartTime: '2025-8-23',
taskEndTime: '2025-8-27',
children: [
{
title: '2.1 信息修改字段校验逻辑调整',
level: 3,
process: 0,
expanded: false,
key: 121,
chargePerson: ['Jason'],
taskStartTime: '2025-8-23',
taskEndTime: '2025-8-25',
},
{
title: '2.2 支持批量修改结构化信息',
level: 3,
process: 0,
expanded: false,
key: 122,
chargePerson: ['Jason'],
taskStartTime: '2025-8-25',
taskEndTime: '2025-8-27',
},
]
},
{
title: '三 海外结构化产品审核节点优化 ',
level: 2,
residence: 'syjz',
process: 0,
expanded: false,
key: 13,
chargePerson: ['Jason'],
taskStartTime: '2025-8-27',
taskEndTime: '2025-8-28',
},
{
title: '四 海外结构化产品列表优化 ',
level: 2,
residence: 'syjz',
process: 0,
expanded: false,
key: 14,
chargePerson: ['Jason'],
taskStartTime: '2025-8-28',
taskEndTime: '2025-8-31',
},
]
},
{
title: 'PIMOS-6814 海外结构化产品流程优化-前端调整（批量入库、修改）',
level: 1,
process: 10,
expanded: true,
key: 2,
residence: 'sjd/syjz',
chargePerson: ['Jason'],
taskStartTime: '2025-8-15',
taskEndTime: '2025-8-21',
children: [
{
title: '1.3.3 线下结构化批量产品录入',
level: 3,
residence: 'sjd',
process: 5,
expanded: true,
key: 21,
chargePerson: ['Jason'],
taskStartTime: '2025-8-15',
taskEndTime: '2025-8-18',
},
{
title: '2.2 支持批量修改结构化产品信息',
level: 3,
residence: 'syjz',
process: 0,
expanded: true,
key: 22,
chargePerson: ['Jason'],
taskStartTime: '2025-8-16',
taskEndTime: '2025-8-19',
}
]
},
{
title: 'PIMOS-6812 查询统计报表优化二期-产品保有查询统计报表优化',
residence: 'sjd',
level: 1,
process: 0,
expanded: true,
key: 3,
chargePerson: ['Jason'],
taskStartTime: '2025-8-11',
taskEndTime: '2025-8-13',
},
{
title: 'PIMOS-6810 PIMOS菜单调整-剩余TAB拆分部分',
residence: 'syjz',
level: 1,
process: 0,
expanded: true,
key: 4,
chargePerson: ['Jason'],
taskStartTime: '2025-8-15',
taskEndTime: '2025-8-17',
},
{
title: 'PIMOS-6819 报价回购白名单交互优化',
residence: 'syjz',
level: 1,
process: 0,
expanded: true,
key: 5,
chargePerson: ['Jason'],
taskStartTime: '2025-8-12',
taskEndTime: '2025-8-13',
},
{
title: 'PIMOS-6643 mcn',
residence: 'syjz',
level: 1,
process: 0,
expanded: true,
key: 6,
chargePerson: ['Jason'],
taskStartTime: '2025-8-12',
taskEndTime: '2025-8-14',
},
{
title: 'PIMOS-6823 策略月报鉴道渠道MOT推送',
residence: 'sjd',
level: 1,
process: 0,
expanded: true,
key: 7,
chargePerson: ['Jason'],
taskStartTime: '2025-8-12',
taskEndTime: '2025-8-17',
},
]line
{
dashedLine: { // 虚线配置
color: 'green', // 颜色
dash: true, // 是否虚线
width: 2,
},
color: '#0f97b3', // 连线颜色
lineWidth: 3, // 连线宽度
lightColor: '#0f97b3', // 发光颜色
showKey: false, // 展示线的key
process: {
mainColor: '#00c9a7',
// linear- gradient(135deg, #001f3f, #0088a9, #00c9a7, #92d5c6, #ebf5ee)
color: 'linear-gradient(-90deg, #29bdd9 0%, #276ace 100%)',
ownerColor: '#000',
fontSize: 14,
showOwner: true, // 展示名称
fontColor: '#fff',
fontFamily: 'cursive',
lightColor: '#6d6d6d',
cloud: {
color: '#0f97b3',
maskColor: '#536976'
// maskColor: 'rgba(0,0,0,0.3)'
}
}
}schema
表单配置数据如下，通过 json 配置的形式生成 form 表单
{
type: 'object',
layout: {
labelCol: { span: 6 },
wrapperCol: { span: 16 },
},
properties: {
title: {
type: 'string',
title: 'title',
'g-field': 'Input',
'g-required': true,
'g-status': 'edit',
rules: {
message: ''
},
'g-props': {
allowClear: true,
}
},
residence: {
type: 'string',
title: 'residence',
'g-field': 'Select',
'g-required': true,
'g-status': 'edit',
'g-treeDatas': 'residences',
rules: {
message: ''
},
'g-props': {
allowClear: true,
}
},
taskTime: {
type: 'array',
title: 'taskTime',
'g-field': 'RangePicker',
'g-required': true,
'g-status': 'edit',
rules: {
message: ''
},
'g-styles': { width: '100%' },
'g-props': {
format: 'YYYY-MM-DD',
allowClear: true,
}
},
process: {
type: 'number',
title: 'process',
'g-field': 'Slider',
'g-required': true,
'g-status': 'edit',
rules: {
message: ''
},
'g-styles': { width: '100%' },
'g-props': {
min: 0,
max: 100,
}
},
},
}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 显示的内容可以自定义
language 国际化
临时假数据
可以用下方数据充当数据源体验
export const treeDataInfo = [
{
title: 'PIMOS-6818 策略组合池提供增加T0基金及底层货基标识查询-管理端新增字段展示',
residence: 'sjd',
level: 1,
process: 20,
expanded: false,
key: 0,
chargePerson: ['Jason'],
taskStartTime: '2025-8-11',
taskEndTime: '2025-8-14',
},
{
title: 'PIMOS-6813 海外结构化产品流程优化-前端调整',
level: 1,
residence: 'sjd/syjz',
process: 0,
expanded: true,
key: 1,
chargePerson: ['Jason'],
taskStartTime: '2025-8-13',
taskEndTime: '2025-8-31',
children: [
{
title: '一 海外结构化产品入库流程优化',
level: 2,
residence: 'sjd/syjz',
process: 0,
expanded: true,
key: 11,
chargePerson: ['Jason'],
taskStartTime: '2025-8-13',
taskEndTime: '2025-8-23',
children: [
{
title: '1.1 入库流程拆分',
level: 3,
residence: 'syjz',
process: 0,
expanded: false,
key: 111,
chargePerson: ['Jason'],
taskStartTime: '2025-8-13',
taskEndTime: '2025-8-16',
},
{
title: '1.2 QQT结构化产品入库流程优化（圆：海外结构化产品入库流程）',
level: 3,
residence: 'sjd',
process: 0,
expanded: false,
key: 112,
chargePerson: ['Jason'],
taskStartTime: '2025-8-13',
taskEndTime: '2025-8-17',
},
{
title: '1.3.1 线下结构化产品选择',
level: 3,
deps: [
{ target: 114, type: 'LL' },
{ target: 114, type: 'RR' },
{ target: 2, type: 'LR' },
{ target: 2, type: 'RL' },
],
residence: 'sjd',
process: 40,
expanded: false,
key: 113,
chargePerson: ['Jason'],
taskStartTime: '2025-8-17',
taskEndTime: '2025-8-20',
},
{
title: '1.3.2 线下结构化单产品录入',
residence: 'sjd',
level: 3,
process: 0,
expanded: false,
key: 114,
chargePerson: ['Jason'],
taskStartTime: '2025-8-20',
taskEndTime: '2025-8-23',
}
]
},
{
title: '二 海外结构化产品修改流程优化',
residence: 'sjd',
level: 2,
process: 0,
expanded: false,
key: 12,
chargePerson: ['Jason'],
taskStartTime: '2025-8-23',
taskEndTime: '2025-8-27',
children: [
{
title: '2.1 信息修改字段校验逻辑调整',
level: 3,
process: 0,
expanded: false,
key: 121,
chargePerson: ['Jason'],
taskStartTime: '2025-8-23',
taskEndTime: '2025-8-25',
},
{
title: '2.2 支持批量修改结构化信息',
level: 3,
process: 0,
expanded: false,
key: 122,
chargePerson: ['Jason'],
taskStartTime: '2025-8-25',
taskEndTime: '2025-8-27',
},
]
},
{
title: '三 海外结构化产品审核节点优化 ',
level: 2,
residence: 'syjz',
process: 0,
expanded: false,
key: 13,
chargePerson: ['Jason'],
taskStartTime: '2025-8-27',
taskEndTime: '2025-8-28',
},
{
title: '四 海外结构化产品列表优化 ',
level: 2,
residence: 'syjz',
process: 0,
expanded: false,
key: 14,
chargePerson: ['Jason'],
taskStartTime: '2025-8-28',
taskEndTime: '2025-8-31',
},
]
},
{
title: 'PIMOS-6814 海外结构化产品流程优化-前端调整（批量入库、修改）',
level: 1,
process: 10,
expanded: true,
key: 2,
residence: 'sjd/syjz',
chargePerson: ['Jason'],
taskStartTime: '2025-8-15',
taskEndTime: '2025-8-21',
children: [
{
title: '1.3.3 线下结构化批量产品录入',
level: 3,
residence: 'sjd',
process: 5,
expanded: true,
key: 21,
chargePerson: ['Jason'],
taskStartTime: '2025-8-15',
taskEndTime: '2025-8-18',
},
{
title: '2.2 支持批量修改结构化产品信息',
level: 3,
residence: 'syjz',
process: 0,
expanded: true,
key: 22,
chargePerson: ['Jason'],
taskStartTime: '2025-8-16',
taskEndTime: '2025-8-19',
}
]
},
{
title: 'PIMOS-6812 查询统计报表优化二期-产品保有查询统计报表优化',
residence: 'sjd',
level: 1,
process: 0,
expanded: true,
key: 3,
chargePerson: ['Jason'],
taskStartTime: '2025-8-11',
taskEndTime: '2025-8-13',
},
{
title: 'PIMOS-6810 PIMOS菜单调整-剩余TAB拆分部分',
residence: 'syjz',
level: 1,
process: 0,
expanded: true,
key: 4,
chargePerson: ['Jason'],
taskStartTime: '2025-8-15',
taskEndTime: '2025-8-17',
},
{
title: 'PIMOS-6819 报价回购白名单交互优化',
residence: 'syjz',
level: 1,
process: 0,
expanded: true,
key: 5,
chargePerson: ['Jason'],
taskStartTime: '2025-8-12',
taskEndTime: '2025-8-13',
},
{
title: 'PIMOS-6643 mcn',
residence: 'syjz',
level: 1,
process: 0,
expanded: true,
key: 6,
chargePerson: ['Jason'],
taskStartTime: '2025-8-12',
taskEndTime: '2025-8-14',
},
{
title: 'PIMOS-6823 策略月报鉴道渠道MOT推送',
residence: 'sjd',
level: 1,
process: 0,
expanded: true,
key: 7,
chargePerson: ['Jason'],
taskStartTime: '2025-8-12',
taskEndTime: '2025-8-17',
},
]
export 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', },
];
export const tempLine = {
dashedLine: { // 虚线配置
color: 'green', // 颜色
dash: true, // 是否虚线
width: 2,
},
color: '#0f97b3', // 连线颜色
lineWidth: 3, // 连线宽度
lightColor: '#0f97b3', // 发光颜色
showKey: false, // 展示线的key
process: {
mainColor: '#00c9a7',
// linear- gradient(135deg, #001f3f, #0088a9, #00c9a7, #92d5c6, #ebf5ee)
color: 'linear-gradient(-90deg, #29bdd9 0%, #276ace 100%)',
ownerColor: '#000',
fontSize: 14,
showOwner: true, // 展示名称
fontColor: '#fff',
fontFamily: 'cursive',
lightColor: '#6d6d6d',
cloud: {
color: '#0f97b3',
maskColor: '#536976'
// maskColor: 'rgba(0,0,0,0.3)'
}
}
}
export const tempTheme = {
}
export const defaultSchema = {
type: 'object',
layout: {
labelCol: { span: 6 },
wrapperCol: { span: 16 },
},
properties: {
title: {
type: 'string',
title: 'title',
'g-field': 'Input',
'g-required': true,
'g-status': 'edit',
rules: {
message: ''
},
'g-props': {
allowClear: true,
}
},
residence: {
type: 'string',
title: 'residence',
'g-field': 'Select',
'g-required': true,
'g-status': 'edit',
'g-treeDatas': 'residences',
rules: {
message: ''
},
'g-props': {
allowClear: true,
}
},
taskTime: {
type: 'array',
title: 'taskTime',
'g-field': 'RangePicker',
'g-required': true,
'g-status': 'edit',
rules: {
message: ''
},
'g-styles': { width: '100%' },
'g-props': {
format: 'YYYY-MM-DD',
allowClear: true,
}
},
process: {
type: 'number',
title: 'process',
'g-field': 'Slider',
'g-required': true,
'g-status': 'edit',
rules: {
message: ''
},
'g-styles': { width: '100%' },
'g-props': {
min: 0,
max: 100,
}
},
},
};
export const onChange = (value, changePath) => {
console.log('onChange', value, changePath);
}