vxe-gantt 3.2.8 → 3.3.1

package/packages/gantt/src/gantt-chart.ts

@@ -49,14 +49,17 @@ export default defineVxeComponent({
       const cellOpts = $xeTable.computeCellOpts
       const rowOpts = $xeTable.computeRowOpts
       const defaultRowHeight = $xeTable.computeDefaultRowHeight
+      const treeOpts = $xeTable.computeTreeOpts
+      const childrenField = treeOpts.children || treeOpts.childrenField
 
       const ganttProps = $xeGantt
       const ganttReactData = $xeGantt.reactData
       const ganttInternalData = $xeGantt.internalData
       const ganttSlots = $xeGantt.$scopedSlots
       const taskBarSlot = ganttSlots.taskBar || ganttSlots['task-bar']
+      const taskBarOverviewSlot = ganttSlots.taskBarOverview || ganttSlots['task-bar-overview']
 
-      const { taskBarMilestoneConfig, taskBarSubviewConfig } = ganttProps
+      const { treeConfig, taskBarMilestoneConfig, taskBarSubviewConfig } = ganttProps
       const { activeLink, activeBarRowid } = ganttReactData
       const titleField = $xeGantt.computeTitleField
       const progressField = $xeGantt.computeProgressField
@@ -77,8 +80,6 @@ export default defineVxeComponent({
       let title = getStringValue(XEUtils.get(row, titleField))
       const progressValue = showProgress ? Math.min(100, Math.max(0, XEUtils.toNumber(XEUtils.get(row, progressField)))) : 0
       const renderTaskType = getTaskType(XEUtils.get(row, typeField))
-      const isMilestone = !!(hasEnableConf(taskBarMilestoneConfig, taskBarMilestoneOpts) && hasMilestoneTask(renderTaskType))
-      const isSubview = !!(hasEnableConf(taskBarSubviewConfig, taskBarSubviewOpts) && hasSubviewTask(renderTaskType))
 
       const vbStyle: VxeComponentStyleType = {}
       const vpStyle: VxeComponentStyleType = {
@@ -94,10 +95,6 @@ export default defineVxeComponent({
         }
       }
 
-      if (contentMethod) {
-        title = getStringValue(contentMethod({ row, title, scaleType: scaleUnit }))
-      }
-
       const ctParams = {
         $gantt: $xeGantt,
         source: sourceType,
@@ -108,177 +105,247 @@ export default defineVxeComponent({
         rowIndex,
         _rowIndex
       }
-      const ctOns: {
-        mouseover?: any
-        mouseleave?: any
-      } = {}
-      if (showTooltip) {
-        ctOns.mouseover = (evnt: MouseEvent) => {
-          const { dragBarRow } = ganttInternalData
-          const ttParams = Object.assign({ $event: evnt }, ctParams)
-          if (!dragBarRow) {
-            $xeGantt.triggerTaskBarTooltipEvent(evnt, ttParams)
-          }
-          $xeGantt.dispatchEvent('task-bar-mouseenter', ttParams, evnt)
-        }
-        ctOns.mouseleave = (evnt: MouseEvent) => {
-          const { dragBarRow } = ganttInternalData
-          const ttParams = Object.assign({ $event: evnt }, ctParams)
-          if (!dragBarRow) {
-            $xeGantt.handleTaskBarTooltipLeaveEvent(evnt, ttParams)
-          }
-          $xeGantt.dispatchEvent('task-bar-mouseleave', ttParams, evnt)
-        }
-      }
 
       let cbVNs: VNode[] = []
       if ($xeGantt.renderGanttTaskBarContent) {
         cbVNs = $xeGantt.renderGanttTaskBarContent(h, ctParams, {
-          isMilestone,
-          title,
-          vbStyle,
-          vpStyle,
-          rowid,
-          ctOns
+          $gantt: $xeGantt,
+          $table: $xeTable,
+          rowid
         })
-      } else if (taskBarSlot) {
-        cbVNs.push(
-          h('div', {
-            key: 'cbc',
-            class: 'vxe-gantt-view--chart-custom-bar-content-wrapper',
-            on: ctOns
-          }, $xeGantt.callSlot(taskBarSlot, barParams, h))
-        )
       } else {
-        if (isSubview && rowChildren && rowChildren.length) {
+        const isMilestone = !!(hasEnableConf(taskBarMilestoneConfig, taskBarMilestoneOpts) && hasMilestoneTask(renderTaskType))
+        const isSubview = !!(hasEnableConf(taskBarSubviewConfig, taskBarSubviewOpts) && hasSubviewTask(renderTaskType))
+
+        if (contentMethod) {
+          title = getStringValue(contentMethod({ row, title, scaleType: scaleUnit }))
+        }
+
+        const ctOns: {
+          mouseover?: any
+          mouseleave?: any
+        } = {}
+        if (showTooltip) {
+          ctOns.mouseover = (evnt: MouseEvent) => {
+            const { dragBarRow } = ganttInternalData
+            const ttParams = Object.assign({ $event: evnt }, ctParams)
+            if (!dragBarRow) {
+              $xeGantt.triggerTaskBarTooltipEvent(evnt, ttParams)
+            }
+            $xeGantt.dispatchEvent('task-bar-mouseenter', ttParams, evnt)
+          }
+          ctOns.mouseleave = (evnt: MouseEvent) => {
+            const { dragBarRow } = ganttInternalData
+            const ttParams = Object.assign({ $event: evnt }, ctParams)
+            if (!dragBarRow) {
+              $xeGantt.handleTaskBarTooltipLeaveEvent(evnt, ttParams)
+            }
+            $xeGantt.dispatchEvent('task-bar-mouseleave', ttParams, evnt)
+          }
+        }
+
+        if (isSubview && treeConfig && rowChildren && rowChildren.length) {
           if (isExpandTree) {
             if (taskBarSubviewOpts.showOverview) {
               cbVNs.push(
                 h('div', {
                   key: 'vcso',
-                  class: ['vxe-gantt-view--chart-subview-wrapper is--overview', {
-                    'is--round': round,
-                    'is--move': moveable
-                  }]
+                  class: 'vxe-gantt-view--chart-subview-wrapper is--overview'
                 }, [
                   h('div', {
                     key: rowid,
                     attrs: {
                       rowid: rowid
                     },
-                    class: 'vxe-gantt-view--chart-subview-bar'
+                    class: ['vxe-gantt-view--chart-subview-row', {
+                      'is--progress': showProgress,
+                      'is--round': round,
+                      'is--move': moveable
+                    }]
                   }, [
                     h('div', {
-                      class: 'vxe-gantt-view--chart-subview-bar-content-wrapper'
+                      attrs: {
+                        rowid: rowid
+                      },
+                      class: [taskBarOverviewSlot ? 'vxe-gantt-view--chart-subview-custom-bar' : 'vxe-gantt-view--chart-subview-bar', `is--${renderTaskType}`]
                     }, [
-                      showContent
+                      taskBarOverviewSlot
                         ? h('div', {
-                          class: 'vxe-gantt-view--chart-content'
-                        }, title)
-                        : renderEmptyElement($xeGantt)
+                          key: 'cbc',
+                          class: 'vxe-gantt-view--chart-subview-custom-bar-content-wrapper'
+                        }, $xeGantt.callSlot(taskBarOverviewSlot, barParams, h))
+                        : h('div', {
+                          class: 'vxe-gantt-view--chart-subview-bar-content-wrapper'
+                        }, [
+                          showContent
+                            ? h('div', {
+                              class: 'vxe-gantt-view--chart-content'
+                            }, title)
+                            : renderEmptyElement($xeGantt)
+                        ])
                     ])
                   ])
                 ])
               )
             }
           } else {
-            cbVNs.push(
-              h('div', {
-                key: 'vcsc',
-                class: ['vxe-gantt-view--chart-subview-wrapper is--inline', {
-                  'is--round': round,
-                  'is--move': moveable
-                }]
-              }, rowChildren.map(childRow => {
-                const childRowid = $xeTable.getRowid(childRow)
-                let childTitle = getStringValue(XEUtils.get(childRow, titleField))
-                const childProgressValue = showProgress ? Math.min(100, Math.max(0, XEUtils.toNumber(XEUtils.get(childRow, progressField)))) : 0
-                const childRenderTaskType = getTaskType(XEUtils.get(childRow, typeField))
-
-                const vpcStyle: VxeComponentStyleType = {
-                  width: `${childProgressValue || 0}%`
+            const cbcVNs: VNode[] = []
+            XEUtils.eachTree(rowChildren, childRow => {
+              const childBarParams = { $gantt: $xeGantt, row: childRow, scaleType: scaleUnit }
+              const childBarStyObj = (barStyle ? (isBarRowStyle ? barStyle(childBarParams) : barStyle) : {}) || {}
+              const { round } = childBarStyObj
+
+              const childRowid = $xeTable.getRowid(childRow)
+              let childTitle = getStringValue(XEUtils.get(childRow, titleField))
+              const childProgressValue = showProgress ? Math.min(100, Math.max(0, XEUtils.toNumber(XEUtils.get(childRow, progressField)))) : 0
+              const childRenderTaskType = getTaskType(XEUtils.get(childRow, typeField))
+              const isChildSubview = !!(hasEnableConf(taskBarSubviewConfig, taskBarSubviewOpts) && hasSubviewTask(childRenderTaskType))
+
+              if (isChildSubview) {
+                return
+              }
+
+              const childVbStyle: VxeComponentStyleType = {}
+              const childVpStyle: VxeComponentStyleType = {
+                width: `${childProgressValue || 0}%`
+              }
+              if (isBarRowStyle) {
+                const { bgColor, completedBgColor } = childBarStyObj
+                if (bgColor) {
+                  childVbStyle.backgroundColor = bgColor
                 }
-                if (isBarRowStyle) {
-                  const { completedBgColor } = barStyObj
-                  if (completedBgColor) {
-                    vpcStyle.backgroundColor = completedBgColor
-                  }
+                if (completedBgColor) {
+                  childVpStyle.backgroundColor = completedBgColor
                 }
+              }
 
-                if (contentMethod) {
-                  childTitle = getStringValue(contentMethod({ row: childRow, title: childTitle, scaleType: scaleUnit }))
-                }
+              if (contentMethod) {
+                childTitle = getStringValue(contentMethod({ row: childRow, title: childTitle, scaleType: scaleUnit }))
+              }
 
-                return h('div', {
+              cbcVNs.push(
+                h('div', {
                   key: childRowid,
                   attrs: {
                     rowid: childRowid
                   },
-                  class: ['vxe-gantt-view--chart-subview-bar', `is--${childRenderTaskType}`]
+                  class: ['vxe-gantt-view--chart-subview-row', `is--${childRenderTaskType}`, {
+                    'is--progress': showProgress,
+                    'is--round': round,
+                    'is--move': moveable,
+                    'row--pending': !!pendingRowFlag && !!pendingRowMaps[childRowid]
+                  }]
                 }, [
                   h('div', {
-                    class: 'vxe-gantt-view--chart-subview-bar-content-wrapper'
+                    attrs: {
+                      rowid: childRowid
+                    },
+                    class: [taskBarSlot ? 'vxe-gantt-view--chart-subview-custom-bar' : 'vxe-gantt-view--chart-subview-bar', `is--${childRenderTaskType}`],
+                    on: {
+                      click (evnt: MouseEvent) {
+                        evnt.stopPropagation()
+                        $xeGantt.handleTaskBarClickEvent(evnt, barParams)
+                      },
+                      dblclick (evnt: MouseEvent) {
+                        evnt.stopPropagation()
+                        $xeGantt.handleTaskBarDblclickEvent(evnt, barParams)
+                      },
+                      mousedown (evnt: MouseEvent) {
+                        evnt.stopPropagation()
+                        if ($xeGantt.handleTaskBarMousedownEvent) {
+                          $xeGantt.handleTaskBarMousedownEvent(evnt, barParams)
+                        }
+                      }
+                    }
                   }, [
-                    showProgress
+                    taskBarSlot
                       ? h('div', {
-                        class: 'vxe-gantt-view--chart-progress',
-                        style: vpcStyle
-                      })
-                      : renderEmptyElement($xeGantt),
-                    showContent
-                      ? h('div', {
-                        class: 'vxe-gantt-view--chart-content'
-                      }, childTitle)
-                      : renderEmptyElement($xeGantt)
+                        key: 'cbc',
+                        class: 'vxe-gantt-view--chart-subview-custom-bar-content-wrapper',
+                        on: ctOns
+                      }, $xeGantt.callSlot(taskBarSlot, childBarParams, h))
+                      : h('div', {
+                        class: 'vxe-gantt-view--chart-subview-bar-content-wrapper',
+                        on: ctOns
+                      }, [
+                        showProgress
+                          ? h('div', {
+                            class: 'vxe-gantt-view--chart-progress',
+                            style: childVpStyle
+                          })
+                          : renderEmptyElement($xeGantt),
+                        showContent
+                          ? h('div', {
+                            class: 'vxe-gantt-view--chart-content'
+                          }, childTitle)
+                          : renderEmptyElement($xeGantt)
+                      ])
                   ])
                 ])
-              }))
+              )
+            }, { children: childrenField })
+
+            cbVNs.push(
+              h('div', {
+                key: 'vcsc',
+                class: 'vxe-gantt-view--chart-subview-wrappe is--inliner'
+              }, cbcVNs)
             )
           }
-        } else if (isMilestone) {
-          const { icon, iconStatus, iconStyle } = taskBarMilestoneOpts
-          const tbmParams = { $gantt: $xeGantt, row }
-          cbVNs.push(
-            h('div', {
-              key: 'vcm',
-              class: 'vxe-gantt-view--chart-milestone-wrapper',
-              on: ctOns
-            }, [
+        } else {
+          if (taskBarSlot) {
+            cbVNs.push(
+              h('div', {
+                key: 'cbc',
+                class: 'vxe-gantt-view--chart-custom-bar-content-wrapper',
+                on: ctOns
+              }, $xeGantt.callSlot(taskBarSlot, barParams, h))
+            )
+          } else if (isMilestone) {
+            const { icon, iconStatus, iconStyle } = taskBarMilestoneOpts
+            const tbmParams = { $gantt: $xeGantt, row }
+            cbVNs.push(
               h('div', {
-                class: ['vxe-gantt-view--chart-milestone-icon', iconStatus ? `theme--${XEUtils.isFunction(iconStatus) ? iconStatus(tbmParams) : iconStatus}` : ''],
-                style: iconStyle ? Object.assign({}, XEUtils.isFunction(iconStyle) ? iconStyle(tbmParams) : iconStyle) : undefined
+                key: 'vcm',
+                class: 'vxe-gantt-view--chart-milestone-wrapper',
+                on: ctOns
               }, [
-                h('i', {
-                  class: (icon ? (XEUtils.isFunction(icon) ? icon(tbmParams) : icon) : '') || getIcon().GANTT_VIEW_TASK_MILESTONE
-                })
-              ]),
-              showContent
-                ? h('div', {
-                  class: 'vxe-gantt-view--chart-milestone-content'
-                }, title)
-                : renderEmptyElement($xeGantt)
-            ])
-          )
-        } else {
-          cbVNs.push(
-            h('div', {
-              key: 'vbc',
-              class: 'vxe-gantt-view--chart-bar-content-wrapper',
-              on: ctOns
-            }, [
-              showProgress
-                ? h('div', {
-                  class: 'vxe-gantt-view--chart-progress',
-                  style: vpStyle
-                })
-                : renderEmptyElement($xeGantt),
-              showContent
-                ? h('div', {
-                  class: 'vxe-gantt-view--chart-content'
-                }, title)
-                : renderEmptyElement($xeGantt)
-            ])
-          )
+                h('div', {
+                  class: ['vxe-gantt-view--chart-milestone-icon', iconStatus ? `theme--${XEUtils.isFunction(iconStatus) ? iconStatus(tbmParams) : iconStatus}` : ''],
+                  style: iconStyle ? Object.assign({}, XEUtils.isFunction(iconStyle) ? iconStyle(tbmParams) : iconStyle) : undefined
+                }, [
+                  h('i', {
+                    class: (icon ? (XEUtils.isFunction(icon) ? icon(tbmParams) : icon) : '') || getIcon().GANTT_VIEW_TASK_MILESTONE
+                  })
+                ]),
+                showContent
+                  ? h('div', {
+                    class: 'vxe-gantt-view--chart-milestone-content'
+                  }, title)
+                  : renderEmptyElement($xeGantt)
+              ])
+            )
+          } else {
+            cbVNs.push(
+              h('div', {
+                key: 'vbc',
+                class: 'vxe-gantt-view--chart-bar-content-wrapper',
+                on: ctOns
+              }, [
+                showProgress
+                  ? h('div', {
+                    class: 'vxe-gantt-view--chart-progress',
+                    style: vpStyle
+                  })
+                  : renderEmptyElement($xeGantt),
+                showContent
+                  ? h('div', {
+                    class: 'vxe-gantt-view--chart-content'
+                  }, title)
+                  : renderEmptyElement($xeGantt)
+              ])
+            )
+          }
         }
       }
 
@@ -288,6 +355,7 @@ export default defineVxeComponent({
           rowid
         },
         class: ['vxe-gantt-view--chart-row', `is--${renderTaskType}`, {
+          'is--progress': showProgress,
           'row--pending': !!pendingRowFlag && !!pendingRowMaps[rowid],
           'is--round': round,
           'is--move': moveable

package/packages/gantt/src/gantt-view.ts

@@ -767,8 +767,8 @@ function updateTaskChartStyle ($xeGanttView: VxeGanttViewConstructor & VxeGanttV
         if (childWrapperEl) {
           // 行内展示
           if (hasClass(childWrapperEl, 'is--inline')) {
-            XEUtils.arrayEach(childWrapperEl.children, (childEl) => {
-              const childBarEl = childEl as HTMLDivElement
+            XEUtils.arrayEach(childWrapperEl.children, (childRowEl) => {
+              const childBarEl = childRowEl.children[0] as HTMLDivElement
               const childRowid = childBarEl.getAttribute('rowid') || ''
               const childChartRest = childRowid ? chartMaps[childRowid] : null
               if (childChartRest) {
@@ -790,7 +790,8 @@ function updateTaskChartStyle ($xeGanttView: VxeGanttViewConstructor & VxeGanttV
             })
           } else {
             // 如果展开子任务
-            const childBarEl = childWrapperEl.firstElementChild as HTMLDivElement
+            const childRowEl = childWrapperEl.children[0] as HTMLDivElement
+            const childBarEl = childRowEl ? childRowEl.children[0] as HTMLDivElement : null
             if (childBarEl) {
               const rowChildren: any[] = row ? row[childrenField] : []
               const { minSize: minChildLeftSize, maxSize: maxChildLeftSize } = handleSubTaskMinMaxSize($xeGanttView, $xeTable, rowChildren)

package/styles/components/gantt-module/gantt-chart.scss

@@ -8,13 +8,15 @@
   pointer-events: none;
 }
 
-.vxe-gantt-view--chart-row {
+.vxe-gantt-view--chart-row,
+.vxe-gantt-view--chart-subview-row {
   position: relative;
   width: 100%;
   height: 0;
+}
+.vxe-gantt-view--chart-row {
   &.row--pending {
-    .vxe-gantt-view--chart-bar,
-    .vxe-gantt-view--chart-subview-bar {
+    .vxe-gantt-view--chart-bar {
       color: var(--vxe-ui-font-disabled-color);
       opacity: 0.5;
       text-decoration: line-through;
@@ -36,11 +38,21 @@
     }
   }
 }
-.vxe-gantt-view--chart-subview-wrapper {
+.vxe-gantt-view--chart-subview-row {
+  &.row--pending {
+    .vxe-gantt-view--chart-subview-bar,
+    .vxe-gantt-view--chart-subview-custom-bar {
+      color: var(--vxe-ui-font-disabled-color);
+      opacity: 0.5;
+      text-decoration: line-through;
+    }
+  }
   &.is--round {
-    & > .vxe-gantt-view--chart-subview-bar {
+    & > .vxe-gantt-view--chart-subview-bar,
+    & > .vxe-gantt-view--chart-subview-custom-bar {
       border-radius: var(--vxe-ui-gantt-view-task-bar-border-radius);
-      .vxe-gantt-view--chart-subview-bar-content-wrapper {
+      .vxe-gantt-view--chart-subview-bar-content-wrapper,
+      .vxe-gantt-view--chart-subview-custom-bar-content-wrapper {
         border-radius: var(--vxe-ui-gantt-view-task-bar-border-radius);
       }
       &:hover {
@@ -50,17 +62,22 @@
       }
     }
   }
+}
+.vxe-gantt-view--chart-subview-wrapper {
   &.is--overview {
-    & > .vxe-gantt-view--chart-subview-bar {
-      color: #ffffff;
-      background-color: var(--vxe-ui-gantt-view-task-bar-overview-background-color);
+    & > .vxe-gantt-view--chart-subview-row {
+      .vxe-gantt-view--chart-subview-bar {
+        color: #ffffff;
+        background-color: var(--vxe-ui-gantt-view-task-bar-overview-background-color);
+      }
     }
   }
 }
 
 .vxe-gantt-view--chart-bar,
+.vxe-gantt-view--chart-custom-bar,
 .vxe-gantt-view--chart-subview-bar,
-.vxe-gantt-view--chart-custom-bar {
+.vxe-gantt-view--chart-subview-custom-bar {
   display: flex;
   flex-direction: row;
   position: absolute;
@@ -68,18 +85,61 @@
   left: 0;
   transform: translateY(-50%);
   pointer-events: all;
-  &.is--default {
-    color: #ffffff;
-    background-color: var(--vxe-ui-gantt-view-task-bar-background-color);
+}
+
+.vxe-gantt-view--chart-row {
+  &.is--progress {
+    & > .vxe-gantt-view--chart-bar,
+    & > .vxe-gantt-view--chart-custom-bar {
+      &.is--default {
+        color: #ffffff;
+        background-color: var(--vxe-ui-gantt-view-task-bar-background-color);
+      }
+    }
+  }
+  &:not(.is--progress) {
+    & > .vxe-gantt-view--chart-bar,
+    & > .vxe-gantt-view--chart-custom-bar {
+      &.is--default {
+        color: #ffffff;
+        background-color: var(--vxe-ui-gantt-view-task-bar-completed-background-color);
+      }
+    }
+  }
+}
+.vxe-gantt-view--chart-subview-row {
+  &.is--progress {
+    & > .vxe-gantt-view--chart-subview-bar,
+    & > .vxe-gantt-view--chart-subview-custom-bar {
+      &.is--subview {
+        color: #ffffff;
+        background-color: var(--vxe-ui-gantt-view-task-bar-overview-background-color);
+      }
+      &.is--default {
+        color: #ffffff;
+        background-color: var(--vxe-ui-gantt-view-task-bar-background-color);
+      }
+    }
   }
-  &.is--subview {
-    color: #ffffff;
-    background-color: var(--vxe-ui-gantt-view-task-bar-overview-background-color);
+  &:not(.is--progress) {
+    & > .vxe-gantt-view--chart-subview-bar,
+    & > .vxe-gantt-view--chart-subview-custom-bar {
+      &.is--subview {
+        color: #ffffff;
+        background-color: var(--vxe-ui-gantt-view-task-bar-overview-background-color);
+      }
+      &.is--default {
+        color: #ffffff;
+        background-color: var(--vxe-ui-gantt-view-task-bar-completed-background-color);
+      }
+    }
   }
 }
+
 .vxe-gantt-view--chart-bar-content-wrapper,
 .vxe-gantt-view--chart-custom-bar-content-wrapper,
-.vxe-gantt-view--chart-subview-bar-content-wrapper {
+.vxe-gantt-view--chart-subview-bar-content-wrapper,
+.vxe-gantt-view--chart-subview-custom-bar-content-wrapper {
   width: 100%;
   overflow: hidden;
 }
@@ -183,7 +243,8 @@ $iconThemeList: (
 }
 
 /*行拖拽*/
-.vxe-gantt-view--chart-row {
+.vxe-gantt-view--chart-row,
+.vxe-gantt-view--chart-subview-row {
   &.row--drag-move {
     transition: transform 0.5s ease;
   }

package/styles/theme/base.scss

@@ -8,7 +8,7 @@
   --vxe-ui-gantt-view-task-bar-border-radius: calc(var(--vxe-ui-gantt-view-split-bar-height) / 2);
   --vxe-ui-gantt-view-task-bar-background-color: var(--vxe-ui-font-primary-lighten-color);
   --vxe-ui-gantt-view-task-bar-completed-background-color: var(--vxe-ui-font-primary-color);
-  --vxe-ui-gantt-view-task-bar-overview-background-color: var(--vxe-ui-font-primary-darken-color);
+  --vxe-ui-gantt-view-task-bar-overview-background-color: var(--vxe-ui-font-disabled-color);
   --vxe-ui-gantt-view-task-line-color: var(--vxe-ui-font-primary-color);
   --vxe-ui-gantt-view-task-line-width: 2px;
   --vxe-ui-gantt-view-task-line-arrow-width: 5;