vxe-gantt 4.0.27 → 4.1.1

package/es/gantt/src/emits.js

@@ -3,6 +3,8 @@ export const ganttEmits = [
     ...gridEmits,
     'task-cell-click',
     'task-cell-dblclick',
+    'task-bar-mouseenter',
+    'task-bar-mouseleave',
     'task-bar-click',
     'task-bar-dblclick',
     'task-view-cell-click',

package/es/gantt/src/gantt-chart.js

@@ -32,7 +32,7 @@ export default defineVxeComponent({
             const progressField = computeProgressField.value;
             const taskBarOpts = computeTaskBarOpts.value;
             const barParams = { $gantt: $xeGantt, row };
-            const { showProgress, showContent, contentMethod, barStyle, drag } = taskBarOpts;
+            const { showProgress, showContent, contentMethod, barStyle, drag, showTooltip } = taskBarOpts;
             const isBarRowStyle = XEUtils.isFunction(barStyle);
             const barStyObj = (barStyle ? (isBarRowStyle ? barStyle(barParams) : barStyle) : {}) || {};
             const { round } = barStyObj;
@@ -58,7 +58,32 @@ export default defineVxeComponent({
             if (contentMethod) {
                 title = getStringValue(contentMethod({ row, title }));
             }
-            const ctParams = { source: sourceType, type: viewType, row, $rowIndex, rowIndex, _rowIndex };
+            const ctParams = { source: sourceType, type: viewType, row, $rowIndex, rowIndex, _rowIndex, $gantt: $xeGantt };
+            const ons = {
+                onClick(evnt) {
+                    $xeGantt.handleTaskBarClickEvent(evnt, barParams);
+                },
+                onDblclick(evnt) {
+                    $xeGantt.handleTaskBarDblclickEvent(evnt, barParams);
+                },
+                onMousedown(evnt) {
+                    if ($xeGantt.handleTaskBarMousedownEvent) {
+                        $xeGantt.handleTaskBarMousedownEvent(evnt, barParams);
+                    }
+                }
+            };
+            if (showTooltip) {
+                ons.onMouseover = (evnt) => {
+                    const ttParams = Object.assign({ $event: evnt }, ctParams);
+                    $xeGantt.triggerTaskBarTooltipEvent(evnt, ttParams);
+                    $xeGantt.dispatchEvent('task-bar-mouseenter', ttParams, evnt);
+                };
+                ons.onMouseleave = (evnt) => {
+                    const ttParams = Object.assign({ $event: evnt }, ctParams);
+                    $xeGantt.handleTaskBarTooltipLeaveEvent(evnt, ttParams);
+                    $xeGantt.dispatchEvent('task-bar-mouseleave', ttParams, evnt);
+                };
+            }
             return h('div', {
                 key: treeConfig ? rowid : $rowIndex,
                 rowid,
@@ -74,22 +99,7 @@ export default defineVxeComponent({
                     $xeGantt.handleTaskBarContextmenuEvent(evnt, ctParams);
                 }
             }, [
-                h('div', {
-                    class: taskBarSlot ? 'vxe-gantt-view--chart-custom-bar' : 'vxe-gantt-view--chart-bar',
-                    style: vbStyle,
-                    rowid,
-                    onClick(evnt) {
-                        $xeGantt.handleTaskBarClickEvent(evnt, barParams);
-                    },
-                    onDblclick(evnt) {
-                        $xeGantt.handleTaskBarDblclickEvent(evnt, barParams);
-                    },
-                    onMousedown(evnt) {
-                        if ($xeGantt.handleTaskBarMousedownEvent) {
-                            $xeGantt.handleTaskBarMousedownEvent(evnt, barParams);
-                        }
-                    }
-                }, taskBarSlot
+                h('div', Object.assign({ class: taskBarSlot ? 'vxe-gantt-view--chart-custom-bar' : 'vxe-gantt-view--chart-bar', style: vbStyle, rowid }, ons), taskBarSlot
                     ? $xeGantt.callSlot(taskBarSlot, barParams)
                     : [
                         showProgress

package/es/gantt/src/gantt-header.js

@@ -47,20 +47,29 @@ export default defineVxeComponent({
                             });
                         })),
                         h('thead', {}, headerGroups.map(({ scaleItem, columns }, $rowIndex) => {
-                            const { type, titleMethod, headerCellStyle, slots } = scaleItem;
+                            const { type, titleFormat, titleMethod, headerCellStyle, slots } = scaleItem;
                             const titleSlot = slots ? slots.title : null;
-                            const todayValue = showNowLine && $rowIndex === headerGroups.length - 1 ? todayDateMaps[type] : null;
+                            const isLast = $rowIndex === headerGroups.length - 1;
+                            const todayValue = isLast && showNowLine ? todayDateMaps[type] : null;
                             return h('tr', {
                                 key: $rowIndex
                             }, columns.map((column, cIndex) => {
                                 const { field, childCount, dateObj } = column;
                                 let label = `${column.title}`;
-                                if ($rowIndex < headerGroups.length - 1) {
-                                    if (scaleItem.type === 'day') {
-                                        label = getI18n(`vxe.gantt.dayss.w${dateObj.e}`);
+                                if (scaleItem.type === 'day') {
+                                    label = getI18n(`vxe.gantt.dayss.w${dateObj.e}`);
+                                }
+                                else {
+                                    if ($rowIndex) {
+                                        label = getI18n(`vxe.gantt.tSimpleFormat.${type}`, dateObj);
                                     }
                                     else {
-                                        label = getI18n(`vxe.gantt.${!$rowIndex && headerGroups.length > 1 ? 'tFullFormat' : 'tSimpleFormat'}.${type}`, dateObj);
+                                        if (isLast && scaleItem.type === 'week') {
+                                            label = getI18n(`vxe.gantt.tSimpleFormat.${type}`, dateObj);
+                                        }
+                                        else {
+                                            label = getI18n(`vxe.gantt.tFullFormat.${type}`, dateObj);
+                                        }
                                     }
                                 }
                                 let cellVNs = label;
@@ -71,6 +80,9 @@ export default defineVxeComponent({
                                 else if (titleMethod) {
                                     cellVNs = `${titleMethod(ctParams)}`;
                                 }
+                                else if (titleFormat) {
+                                    cellVNs = XEUtils.toDateString(dateObj.date, titleFormat);
+                                }
                                 let cellStys = {};
                                 if (headerCellStyle) {
                                     if (XEUtils.isFunction(headerCellStyle)) {

package/es/gantt/src/gantt-view.js

@@ -1,14 +1,16 @@
-import { h, ref, reactive, nextTick, inject, watch, provide, onMounted, onUnmounted } from 'vue';
+import { h, ref, reactive, nextTick, inject, watch, provide, computed, onMounted, onUnmounted } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
 import { setScrollTop, setScrollLeft, removeClass, addClass } from '../../ui/src/dom';
 import { VxeUI } from '@vxe-ui/core';
-import { getRefElem } from './util';
+import { getRefElem, getStandardGapTime } from './util';
 import XEUtils from 'xe-utils';
 import GanttViewHeaderComponent from './gantt-header';
 import GanttViewBodyComponent from './gantt-body';
 import GanttViewFooterComponent from './gantt-footer';
 const { globalEvents } = VxeUI;
 const sourceType = 'gantt';
+const minuteMs = 1000 * 60;
+const dayMs = minuteMs * 60 * 24;
 function createInternalData() {
     return {
         xeTable: null,
@@ -40,7 +42,7 @@ export default defineVxeComponent({
     setup(props, context) {
         const xID = XEUtils.uniqueId();
         const $xeGantt = inject('$xeGantt', {});
-        const { computeTaskOpts, computeStartField, computeEndField, computeScrollbarOpts, computeScrollbarXToTop, computeScrollbarYToLeft } = $xeGantt.getComputeMaps();
+        const { computeTaskOpts, computeStartField, computeEndField, computeScrollbarOpts, computeScrollbarXToTop, computeScrollbarYToLeft, computeScaleUnit, computeWeekScale, computeMinScale } = $xeGantt.getComputeMaps();
         const refElem = ref();
         const refScrollXVirtualElem = ref();
         const refScrollYVirtualElem = ref();
@@ -89,7 +91,72 @@ export default defineVxeComponent({
         const refMaps = {
             refElem
         };
-        const computeMaps = {};
+        const computeScaleDateList = computed(() => {
+            const { minViewDate, maxViewDate } = reactData;
+            const minScale = computeMinScale.value;
+            const dateList = [];
+            if (!minViewDate || !maxViewDate) {
+                return dateList;
+            }
+            const startTime = minViewDate.getTime();
+            const endTime = maxViewDate.getTime();
+            switch (minScale.type) {
+                case 'year': {
+                    let currDate = XEUtils.getWhatYear(minViewDate, 0, 'first');
+                    while (currDate <= maxViewDate) {
+                        const itemDate = currDate;
+                        dateList.push(itemDate);
+                        currDate = XEUtils.getWhatYear(currDate, 1);
+                    }
+                    break;
+                }
+                case 'quarter': {
+                    let currDate = XEUtils.getWhatQuarter(minViewDate, 0, 'first');
+                    while (currDate <= maxViewDate) {
+                        const itemDate = currDate;
+                        dateList.push(itemDate);
+                        currDate = XEUtils.getWhatQuarter(currDate, 1);
+                    }
+                    break;
+                }
+                case 'month': {
+                    let currDate = XEUtils.getWhatMonth(minViewDate, 0, 'first');
+                    while (currDate <= maxViewDate) {
+                        const itemDate = currDate;
+                        dateList.push(itemDate);
+                        currDate = XEUtils.getWhatMonth(currDate, 1);
+                    }
+                    break;
+                }
+                case 'week': {
+                    let currDate = XEUtils.getWhatWeek(minViewDate, 0, minScale.startDay, minScale.startDay);
+                    while (currDate <= maxViewDate) {
+                        const itemDate = currDate;
+                        dateList.push(itemDate);
+                        currDate = XEUtils.getWhatWeek(currDate, 1);
+                    }
+                    break;
+                }
+                case 'day':
+                case 'date':
+                case 'hour':
+                case 'minute':
+                case 'second': {
+                    const gapTime = getStandardGapTime(minScale.type);
+                    let currTime = startTime;
+                    while (currTime <= endTime) {
+                        const itemDate = new Date(currTime);
+                        dateList.push(itemDate);
+                        currTime += gapTime;
+                    }
+                    break;
+                }
+            }
+            return dateList;
+        });
+        const computeMaps = {
+            computeScaleDateList
+        };
         const $xeGanttView = {
             xID,
             props,
@@ -126,36 +193,16 @@ export default defineVxeComponent({
                 second: `${yyyy}_${MM}_${dd}_${HH}_${mm}_${ss}`
             };
         };
-        const handleParseColumn = () => {
-            const ganttProps = $xeGantt.props;
+        const handleColumnHeader = () => {
             const ganttReactData = $xeGantt.reactData;
-            const { treeConfig } = ganttProps;
             const { taskScaleList } = ganttReactData;
-            const { minViewDate, maxViewDate } = reactData;
-            const minScale = XEUtils.last(taskScaleList);
+            const scaleUnit = computeScaleUnit.value;
+            const minScale = computeMinScale.value;
+            const weekScale = computeWeekScale.value;
+            const scaleDateList = computeScaleDateList.value;
             const fullCols = [];
             const groupCols = [];
-            if (minScale && minViewDate && maxViewDate) {
-                const minSType = minScale.type;
-                const weekScale = taskScaleList.find(item => item.type === 'week');
-                let gapTime = 1000 * 60 * 60 * 24;
-                switch (minScale.type) {
-                    case 'hour':
-                        gapTime = 1000 * 60 * 60;
-                        break;
-                    case 'minute':
-                        gapTime = 1000 * 60;
-                        break;
-                    case 'second':
-                        gapTime = 1000;
-                        break;
-                    default: {
-                        break;
-                    }
-                }
-                const currTime = minViewDate.getTime();
-                const diffDayNum = maxViewDate.getTime() - minViewDate.getTime();
-                const countSize = Math.max(5, Math.floor(diffDayNum / gapTime) + 1);
+            if (minScale && scaleUnit && scaleDateList.length) {
                 const renderListMaps = {
                     year: [],
                     quarter: [],
@@ -179,7 +226,7 @@ export default defineVxeComponent({
                     second: {}
                 };
                 const handleData = (type, colMaps, minCol) => {
-                    if (minSType === type) {
+                    if (minScale.type === type) {
                         return;
                     }
                     const currCol = colMaps[type];
@@ -197,14 +244,14 @@ export default defineVxeComponent({
                         currGpCol.children.push(minCol);
                     }
                 };
-                for (let i = 0; i < countSize; i++) {
-                    const itemDate = new Date(currTime + (i * gapTime));
+                for (let i = 0; i < scaleDateList.length; i++) {
+                    const itemDate = scaleDateList[i];
                     const [yyyy, MM, dd, HH, mm, ss] = XEUtils.toDateString(itemDate, 'yyyy-M-d-H-m-s').split('-');
                     const e = itemDate.getDay();
                     const E = e + 1;
                     const q = Math.ceil((itemDate.getMonth() + 1) / 3);
                     const W = XEUtils.getYearWeek(itemDate, weekScale ? weekScale.startDay : undefined);
-                    const dateObj = { yy: yyyy, M: MM, d: dd, H: HH, m: mm, s: ss, q, W, E, e };
+                    const dateObj = { date: itemDate, yy: yyyy, M: MM, d: dd, H: HH, m: mm, s: ss, q, W, E, e };
                     const colMaps = {
                         year: {
                             field: yyyy,
@@ -252,14 +299,14 @@ export default defineVxeComponent({
                             dateObj
                         }
                     };
-                    const minCol = colMaps[minSType];
+                    const minCol = colMaps[minScale.type];
                     if (minScale.level < 19) {
                         handleData('year', colMaps, minCol);
                     }
                     if (minScale.level < 17) {
                         handleData('quarter', colMaps, minCol);
                     }
-                    if (minScale.level < 14) {
+                    if (minScale.level < 15) {
                         handleData('month', colMaps, minCol);
                     }
                     if (minScale.level < 13) {
@@ -268,7 +315,7 @@ export default defineVxeComponent({
                     if (minScale.level < 11) {
                         handleData('day', colMaps, minCol);
                     }
-                    if (minScale.level < 12) {
+                    if (minScale.level < 9) {
                         handleData('date', colMaps, minCol);
                     }
                     if (minScale.level < 7) {
@@ -277,10 +324,13 @@ export default defineVxeComponent({
                     if (minScale.level < 5) {
                         handleData('minute', colMaps, minCol);
                     }
+                    if (minScale.level < 3) {
+                        handleData('second', colMaps, minCol);
+                    }
                     fullCols.push(minCol);
                 }
                 taskScaleList.forEach(scaleItem => {
-                    if (scaleItem.type === minSType) {
+                    if (scaleItem.type === minScale.type) {
                         groupCols.push({
                             scaleItem,
                             columns: fullCols
@@ -299,6 +349,211 @@ export default defineVxeComponent({
                         columns: list
                     });
                 });
+            }
+            return {
+                fullCols,
+                groupCols
+            };
+        };
+        const createChartRender = (fullCols) => {
+            const { minViewDate } = reactData;
+            const minScale = computeMinScale.value;
+            const scaleUnit = computeScaleUnit.value;
+            const weekScale = computeWeekScale.value;
+            switch (scaleUnit) {
+                case 'year': {
+                    const indexMaps = {};
+                    fullCols.forEach(({ dateObj }, i) => {
+                        const yyyyMM = XEUtils.toDateString(dateObj.date, 'yyyy');
+                        indexMaps[yyyyMM] = i;
+                    });
+                    return (startValue, endValue) => {
+                        const startDate = parseStringDate(startValue);
+                        const endDate = parseStringDate(endValue);
+                        const startStr = XEUtils.toDateString(startDate, 'yyyy');
+                        const startFirstDate = XEUtils.getWhatYear(startDate, 0, 'first');
+                        const endStr = XEUtils.toDateString(endDate, 'yyyy');
+                        const endFirstDate = XEUtils.getWhatYear(endDate, 0, 'first');
+                        const dateSize = Math.floor((XEUtils.getWhatYear(endDate, 1, 'first').getTime() - endFirstDate.getTime()) / dayMs);
+                        const subtract = (startDate.getTime() - startFirstDate.getTime()) / dayMs / dateSize;
+                        const addSize = Math.max(0, (endDate.getTime() - endFirstDate.getTime()) / dayMs + 1) / dateSize;
+                        const offsetLeftSize = (indexMaps[startStr] || 0) + subtract;
+                        return {
+                            offsetLeftSize,
+                            offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize
+                        };
+                    };
+                }
+                case 'quarter': {
+                    const indexMaps = {};
+                    fullCols.forEach(({ dateObj }, i) => {
+                        const q = XEUtils.toDateString(dateObj.date, 'yyyy-q');
+                        indexMaps[q] = i;
+                    });
+                    return (startValue, endValue) => {
+                        const startDate = parseStringDate(startValue);
+                        const endDate = parseStringDate(endValue);
+                        const startStr = XEUtils.toDateString(startDate, 'yyyy-q');
+                        const startFirstDate = XEUtils.getWhatQuarter(startDate, 0, 'first');
+                        const endStr = XEUtils.toDateString(endDate, 'yyyy-q');
+                        const endFirstDate = XEUtils.getWhatQuarter(endDate, 0, 'first');
+                        const dateSize = Math.floor((XEUtils.getWhatQuarter(endDate, 1, 'first').getTime() - endFirstDate.getTime()) / dayMs);
+                        const subtract = (startDate.getTime() - startFirstDate.getTime()) / dayMs / dateSize;
+                        const addSize = Math.max(0, (endDate.getTime() - endFirstDate.getTime()) / dayMs + 1) / dateSize;
+                        const offsetLeftSize = (indexMaps[startStr] || 0) + subtract;
+                        return {
+                            offsetLeftSize,
+                            offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize
+                        };
+                    };
+                }
+                case 'month': {
+                    const indexMaps = {};
+                    fullCols.forEach(({ dateObj }, i) => {
+                        const yyyyMM = XEUtils.toDateString(dateObj.date, 'yyyy-MM');
+                        indexMaps[yyyyMM] = i;
+                    });
+                    return (startValue, endValue) => {
+                        const startDate = parseStringDate(startValue);
+                        const endDate = parseStringDate(endValue);
+                        const startStr = XEUtils.toDateString(startDate, 'yyyy-MM');
+                        const startFirstDate = XEUtils.getWhatMonth(startDate, 0, 'first');
+                        const endStr = XEUtils.toDateString(endDate, 'yyyy-MM');
+                        const endFirstDate = XEUtils.getWhatMonth(endDate, 0, 'first');
+                        const dateSize = Math.floor((XEUtils.getWhatMonth(endDate, 1, 'first').getTime() - endFirstDate.getTime()) / dayMs);
+                        const subtract = (startDate.getTime() - startFirstDate.getTime()) / dayMs / dateSize;
+                        const addSize = Math.max(0, (endDate.getTime() - endFirstDate.getTime()) / dayMs + 1) / dateSize;
+                        const offsetLeftSize = (indexMaps[startStr] || 0) + subtract;
+                        return {
+                            offsetLeftSize,
+                            offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize
+                        };
+                    };
+                }
+                case 'week': {
+                    const indexMaps = {};
+                    fullCols.forEach(({ dateObj }, i) => {
+                        const yyyyW = XEUtils.toDateString(dateObj.date, 'yyyy-W', { firstDay: weekScale ? weekScale.startDay : undefined });
+                        indexMaps[yyyyW] = i;
+                    });
+                    return (startValue, endValue) => {
+                        const startDate = parseStringDate(startValue);
+                        const endDate = parseStringDate(endValue);
+                        const startStr = XEUtils.toDateString(startDate, 'yyyy-W', { firstDay: weekScale ? weekScale.startDay : undefined });
+                        const startFirstDate = XEUtils.getWhatWeek(startDate, 0, weekScale ? weekScale.startDay : undefined, weekScale ? weekScale.startDay : undefined);
+                        const endStr = XEUtils.toDateString(endDate, 'yyyy-W', { firstDay: weekScale ? weekScale.startDay : undefined });
+                        const endFirstDate = XEUtils.getWhatWeek(endDate, 0, weekScale ? weekScale.startDay : undefined, weekScale ? weekScale.startDay : undefined);
+                        const dateSize = Math.floor((XEUtils.getWhatWeek(endDate, 1, weekScale ? weekScale.startDay : undefined, weekScale ? weekScale.startDay : undefined).getTime() - endFirstDate.getTime()) / dayMs);
+                        const subtract = (startDate.getTime() - startFirstDate.getTime()) / dayMs / dateSize;
+                        const addSize = Math.max(0, (endDate.getTime() - endFirstDate.getTime()) / dayMs + 1) / dateSize;
+                        const offsetLeftSize = (indexMaps[startStr] || 0) + subtract;
+                        return {
+                            offsetLeftSize,
+                            offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize
+                        };
+                    };
+                }
+                case 'day':
+                case 'date': {
+                    const indexMaps = {};
+                    fullCols.forEach(({ dateObj }, i) => {
+                        const yyyyMM = XEUtils.toDateString(dateObj.date, 'yyyy-MM-dd');
+                        indexMaps[yyyyMM] = i;
+                    });
+                    return (startValue, endValue) => {
+                        const startDate = parseStringDate(startValue);
+                        const endDate = parseStringDate(endValue);
+                        const startStr = XEUtils.toDateString(startDate, 'yyyy-MM-dd');
+                        const startFirstDate = XEUtils.getWhatDay(startDate, 0, 'first');
+                        const endStr = XEUtils.toDateString(endDate, 'yyyy-MM-dd');
+                        const endFirstDate = XEUtils.getWhatDay(endDate, 0, 'first');
+                        const minuteSize = Math.floor((XEUtils.getWhatDay(endDate, 1, 'first').getTime() - endFirstDate.getTime()) / minuteMs);
+                        const subtract = (startDate.getTime() - startFirstDate.getTime()) / minuteMs / minuteSize;
+                        const addSize = Math.max(0, (endDate.getTime() - endFirstDate.getTime()) / minuteMs + 1) / minuteSize;
+                        const offsetLeftSize = (indexMaps[startStr] || 0) + subtract;
+                        return {
+                            offsetLeftSize,
+                            offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize
+                        };
+                    };
+                }
+                case 'hour': {
+                    const indexMaps = {};
+                    fullCols.forEach(({ dateObj }, i) => {
+                        const yyyyMM = XEUtils.toDateString(dateObj.date, 'yyyy-MM-dd HH');
+                        indexMaps[yyyyMM] = i;
+                    });
+                    return (startValue, endValue) => {
+                        const startDate = parseStringDate(startValue);
+                        const endDate = parseStringDate(endValue);
+                        const startStr = XEUtils.toDateString(startDate, 'yyyy-MM-dd HH');
+                        const startFirstDate = XEUtils.getWhatHours(startDate, 0, 'first');
+                        const endStr = XEUtils.toDateString(endDate, 'yyyy-MM-dd HH');
+                        const endFirstDate = XEUtils.getWhatHours(endDate, 0, 'first');
+                        const minuteSize = Math.floor((XEUtils.getWhatHours(endDate, 1, 'first').getTime() - endFirstDate.getTime()) / minuteMs);
+                        const subtract = (startDate.getTime() - startFirstDate.getTime()) / minuteMs / minuteSize;
+                        const addSize = Math.max(0, (endDate.getTime() - endFirstDate.getTime()) / minuteMs + 1) / minuteSize;
+                        const offsetLeftSize = (indexMaps[startStr] || 0) + subtract;
+                        return {
+                            offsetLeftSize,
+                            offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize
+                        };
+                    };
+                }
+                case 'minute': {
+                    const indexMaps = {};
+                    fullCols.forEach(({ dateObj }, i) => {
+                        const yyyyMM = XEUtils.toDateString(dateObj.date, 'yyyy-MM-dd HH:mm');
+                        indexMaps[yyyyMM] = i;
+                    });
+                    return (startValue, endValue) => {
+                        const startDate = parseStringDate(startValue);
+                        const endDate = parseStringDate(endValue);
+                        const startStr = XEUtils.toDateString(startDate, 'yyyy-MM-dd HH:mm');
+                        const startFirstDate = XEUtils.getWhatMinutes(startDate, 0, 'first');
+                        const endStr = XEUtils.toDateString(endDate, 'yyyy-MM-dd HH:mm');
+                        const endFirstDate = XEUtils.getWhatMinutes(endDate, 0, 'first');
+                        const minuteSize = Math.floor((XEUtils.getWhatMinutes(endDate, 1, 'first').getTime() - endFirstDate.getTime()) / minuteMs);
+                        const subtract = (startDate.getTime() - startFirstDate.getTime()) / minuteMs / minuteSize;
+                        const addSize = Math.max(0, (endDate.getTime() - endFirstDate.getTime()) / minuteMs + 1) / minuteSize;
+                        const offsetLeftSize = (indexMaps[startStr] || 0) + subtract;
+                        return {
+                            offsetLeftSize,
+                            offsetWidthSize: (indexMaps[endStr] || 0) - offsetLeftSize + addSize
+                        };
+                    };
+                }
+                case 'second': {
+                    const gapTime = getStandardGapTime(minScale.type);
+                    return (startValue, endValue) => {
+                        const startDate = parseStringDate(startValue);
+                        const endDate = parseStringDate(endValue);
+                        let offsetLeftSize = 0;
+                        let offsetWidthSize = 0;
+                        if (minViewDate) {
+                            offsetLeftSize = (startDate.getTime() - minViewDate.getTime()) / gapTime;
+                            offsetWidthSize = ((endDate.getTime() - startDate.getTime()) / gapTime) + 1;
+                        }
+                        return {
+                            offsetLeftSize,
+                            offsetWidthSize
+                        };
+                    };
+                }
+            }
+            return () => {
+                return {
+                    offsetLeftSize: 0,
+                    offsetWidthSize: 0
+                };
+            };
+        };
+        const handleParseColumn = () => {
+            const ganttProps = $xeGantt.props;
+            const { treeConfig } = ganttProps;
+            const { minViewDate, maxViewDate } = reactData;
+            const { fullCols, groupCols } = handleColumnHeader();
+            if (minViewDate && maxViewDate && fullCols.length) {
                 const $xeTable = internalData.xeTable;
                 if ($xeTable) {
                     const startField = computeStartField.value;
@@ -313,20 +568,18 @@ export default defineVxeComponent({
                     const { transform } = treeOpts;
                     const childrenField = treeOpts.children || treeOpts.childrenField;
                     const ctMaps = {};
+                    const renderFn = createChartRender(fullCols);
                     const handleParseRender = (row) => {
                         const rowid = $xeTable.getRowid(row);
                         const startValue = XEUtils.get(row, startField);
                         const endValue = XEUtils.get(row, endField);
                         if (startValue && endValue) {
-                            const startDate = parseStringDate(startValue);
-                            const endDate = parseStringDate(endValue);
-                            const oLeftSize = Math.floor((startDate.getTime() - minViewDate.getTime()) / gapTime);
-                            const oWidthSize = Math.floor((endDate.getTime() - startDate.getTime()) / gapTime) + 1;
+                            const { offsetLeftSize, offsetWidthSize } = renderFn(startValue, endValue);
                             ctMaps[rowid] = {
                                 row,
                                 rowid,
-                                oLeftSize,
-                                oWidthSize
+                                oLeftSize: offsetLeftSize,
+                                oWidthSize: offsetWidthSize
                             };
                         }
                     };
@@ -575,11 +828,11 @@ export default defineVxeComponent({
             return new Promise(resolve => {
                 const { rceTimeout, rceRunTime } = internalData;
                 const $xeTable = internalData.xeTable;
-                let refreshDelay = 50;
+                let refreshDelay = 30;
                 if ($xeTable) {
                     const { computeResizeOpts } = $xeTable.getComputeMaps();
                     const resizeOpts = computeResizeOpts.value;
-                    refreshDelay = resizeOpts.refreshDelay || 50;
+                    refreshDelay = resizeOpts.refreshDelay || refreshDelay;
                 }
                 if (rceTimeout) {
                     clearTimeout(rceTimeout);
@@ -880,7 +1133,14 @@ export default defineVxeComponent({
         const ganttViewMethods = {
             refreshData() {
                 handleUpdateData();
-                return handleLazyRecalculate();
+                handleRecalculateStyle();
+                return nextTick().then(() => {
+                    const $xeTable = internalData.xeTable;
+                    handleRecalculateStyle();
+                    if ($xeTable) {
+                        return $xeTable.recalculate();
+                    }
+                });
             },
             updateViewData() {
                 const $xeTable = internalData.xeTable;