bri-components 1.4.92 → 1.4.93

package/src/components/other/BriGantt.vue

@@ -1,1084 +1,1084 @@
-<template>
-    <div class="briGantt">
-        <div class="briGantt-top">
-            <div class="bri-scrollbar0">
-                <slot></slot>
-            </div>
-            <!-- 时间渲染 -->
-            <div
-                class="briGantt-timer"
-                :style="{width: clientWidth + 'px'}"
-            >
-                <a
-                    class="briGantt-timer-icon briGantt-timer-icon-left"
-                    @click="preTime"
-                >
-                    <Icon type="ios-arrow-back" />
-                </a>
-                <div class="briGantt-timer-bg"></div>
-                <div
-                    class="bri-scrollbar0 briGantt-timer-main"
-                    ref="briGanttTimer"
-                    v-on:scroll="handleScroll($event, [{ ref: 'briGanttArea', direction: 'scrollLeft' }])"
-                >
-                    <table
-                        :style="{tableLayout:'fixed', width: tableWidth}"
-                        class="briGantt-tableBox"
-                    >
-                        <thead class="briGantt-table-thead">
-                            <tr>
-                                <th
-                                    class="briGantt-table-th"
-                                    v-for="timeItem in simpleData"
-                                    :key="timeItem.key"
-                                    :colspan="timeItem.colspan"
-                                    :style="{...timeItem.style}"
-                                >
-                                    <Tooltip
-                                        :content="timeItem.fullName"
-                                        placement="top"
-                                        :transfer="true"
-                                        :transfer-class-name="`briGantt-transfer-tooltip-${themeName}`"
-                                    >
-                                        {{ timeItem.name }}
-                                    </Tooltip>
-                                    <div
-                                        v-if="timeItem.now"
-                                        class="briGantt-line-now"
-                                    ></div>
-                                </th>
-                            </tr>
-                        </thead>
-                    </table>
-                </div>
-                <a
-                    class="briGantt-timer-icon briGantt-timer-icon-right"
-                    @click="nextTime"
-                >
-                    <Icon type="ios-arrow-forward" />
-                </a>
-            </div>
-        </div>
-        <div class="briGantt-bottom">
-            <div
-                class="briGantt-bottom-title"
-                v-if="title"
-            >{{ title }}</div>
-            <div class="briGantt-bottom-content">
-                <!-- 数据映射 -->
-                <div
-                    v-if="table"
-                    class="bri-scrollbar0 briGantt-tabledata"
-                    ref="briGanttColumn"
-                    v-on:scroll="handleScroll($event, [{ ref: 'briGanttArea', direction: 'scrollTop' }])"
-                >
-                    <table class="briGantt-tableBox briGantt-table">
-                        <tbody>
-                            <tr
-                                class="briGantt-table-tr"
-                                v-for="(row, rowIndex) in table"
-                                :key="rowIndex"
-                            >
-                                <td
-                                    class="briGantt-table-td"
-                                    v-for="(col, colIndex) in row"
-                                    :key="colIndex"
-                                    :colspan="col.colspan"
-                                    :rowspan="col.rowspan"
-                                    :style="col.rowspan > 1 ? {background: '#fff',padding: '0 10px',fontWeight:500} : {padding: '0 10px'}"
-                                    v-html="col.label"
-                                ></td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-                <!-- 区域映射 -->
-                <div
-                    class="briGantt-data bri-scrollbar"
-                    :class="`briGantt-data-${type}`"
-                    ref="briGanttArea"
-                    v-on:scroll="handleScroll($event, [{ ref: 'briGanttTimer', direction: 'scrollLeft' }, { ref:'briGanttColumn', direction:'scrollTop' }, { ref:'briGanttScrollbar', direction:'scrollLeft' }])"
-                >
-                    <table
-                        :style="{tableLayout:'fixed', width: tableWidth}"
-                        class="briGantt-tableBox briGantt-table"
-                        border="0"
-                        cellspacing="0"
-                        cellpadding="0"
-                    >
-                        <tr v-if="computedData.length === 0">
-                            <td
-                                :colspan="timeData.length"
-                                class="briGantt-table-td"
-                            >暂无内容</td>
-                        </tr>
-                        <tbody v-if="type==='table'">
-                            <tr v-if="computedData.length === 0">
-                                <td
-                                    :colspan="timeData.length"
-                                    class="briGantt-table-td"
-                                >暂无内容</td>
-                            </tr>
-                            <tr
-                                class="briGantt-table-tr"
-                                v-for="(taskItem, taskIndex) in computedData"
-                                :key="taskIndex"
-                                style="border-left: none"
-                            >
-                                <td
-                                    class="briGantt-table-td"
-                                    v-for="(timeItem, timeIndex) in taskItem"
-                                    :key="timeIndex"
-                                    :colspan="timeItem.colspan"
-                                >
-                                    <slot
-                                        v-if="timeItem.isApply"
-                                        name="table"
-                                        v-bind:task="timeItem.task"
-                                        v-bind:time="timeItem"
-                                    >
-                                        <div
-                                            class="briGantt-table-td-main"
-                                            :style="timeItem.style"
-                                        ></div>
-                                    </slot>
-                                    <slot
-                                        v-else
-                                        name="tabletd"
-                                        v-bind:preTime="taskItem[timeIndex-1]"
-                                        v-bind:nextTime="taskItem[timeIndex+1]"
-                                        v-bind:task="timeItem.task"
-                                        v-bind:time="timeItem"
-                                    ></slot>
-                                </td>
-                            </tr>
-                        </tbody>
-                        <tbody v-else-if="type==='chart'">
-                            <tr
-                                class="briGantt-chart-tr"
-                                v-for="(taskItem, taskIndex) in computedData"
-                                :key="taskIndex"
-                            >
-                                <td
-                                    class="briGantt-chart-td"
-                                    v-for="(timeItem, timeIndex) in taskItem"
-                                    :key="timeIndex"
-                                    :colspan="timeItem.colspan"
-                                >
-                                    <div
-                                        v-if="timeItem.isApply"
-                                        class="briGantt-chart-td-main"
-                                    >
-                                        <slot
-                                            name="chart"
-                                            v-bind:task="timeItem.task"
-                                            v-bind:chartItem="timeItem"
-                                        >
-                                            <Tooltip
-                                                placement="right"
-                                                transfer
-                                                :transfer-class-name="`briGantt-transfer-tooltip-${themeName}`"
-                                                style="width:100%"
-                                            >
-                                                <div
-                                                    class="briGantt-chart-td-main-center"
-                                                    :style="{
-                                                        background:$getColor(timeItem.style.background),
-                                                        minWidth: minTdWidth,
-                                                        border: `1px solid ${timeItem.style.background}`,
-                                                        padding: timeItem.task.progressField == 100 ? '' : '1px',
-                                                        cursor: canClick ? 'pointer' : ''
-                                                    }"
-                                                    @click="clickRow(timeItem)"
-                                                >
-                                                    <slot
-                                                        name="chartCenter"
-                                                        v-bind:task="timeItem.task"
-                                                        v-bind:chartItem="timeItem"
-                                                    >
-                                                        <div
-                                                            class="ms-ellipsis"
-                                                            :style="{
-                                                                background:timeItem.style.background,
-                                                                width: `${timeItem.task.progressField}%`
-                                                            }"
-                                                        >
-                                                            {{ timeItem.task.label }}
-                                                        </div>
-                                                    </slot>
-                                                </div>
-                                                <div
-                                                    slot="content"
-                                                    class="briGantt-chart-td-main-center-tooltip"
-                                                >
-                                                    <span
-                                                        class="briGantt-chart-td-main-center-tooltip-select"
-                                                        :style="{...timeItem.style}"
-                                                    >
-                                                    </span>
-                                                    {{timeItem.task.select}}
-                                                    <div>完成度:{{timeItem.task.progressField}}%</div>
-                                                    <div>{{ timeItem.task.label }}</div>
-                                                </div>
-                                            </Tooltip>
-                                        </slot>
-                                    </div>
-                                    <slot
-                                        v-else
-                                        name="charttd"
-                                        v-bind:task="timeItem.task"
-                                        v-bind:time="timeItem"
-                                        v-bind:preTime="taskItem[timeIndex-1]"
-                                        v-bind:nextTime="taskItem[timeIndex+1]"
-                                    >
-                                        <div class="briGantt-chart-td-greyLine"></div>
-                                    </slot>
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-
-            <!-- 底部滚动条 -->
-            <!-- <div class="briGantt-scroll">
-                <div class="briGantt-scroll-main"
-                    ref="briGanttScrollbar"
-                    :style="{ width: clientWidth + 'px' }"
-                    v-on:scroll="handleScroll($event, [{ ref: 'briGanttTimer', direction: 'scrollLeft' }, { ref:'briGanttArea', direction:'scrollLeft' }, { ref:'briGanttBlue', direction:'scrollLeft' }])">
-                    <div :style="{width: tableWidth}"></div>
-                </div>
-            </div> -->
-        </div>
-    </div>
-</template>
-<script>
-    function getDate (hours) {
-        const currentDate = new Date();
-        const currentYear = currentDate.getFullYear();
-        const currentMonth = currentDate.getMonth();
-        const currentDay = currentDate.getDate();
-        const timeStamp = new Date(
-            currentYear,
-            currentMonth,
-            currentDay,
-            0,
-            0,
-            0
-        ).getTime();
-        return new Date(timeStamp + hours * 60 * 60 * 1000).getTime();
-    }
-    function getMonth (N) {
-        const currentDate = new Date();
-        const currentYear = currentDate.getFullYear();
-        const currentMonth = currentDate.getMonth();
-        return new Date(currentYear, currentMonth + N, 1).getTime();
-    }
-    // 示例数据
-    let tasks = [
-        {
-            id: 1,
-            label: "Make some noise",
-            user:
-                '<a href="https://www.google.com/search?q=John+Doe" target="_blank" style="color:#0077c0;">John Doe</a>',
-            start: getDate(-24 * 5),
-            end: getDate(0),
-            select: "紧急",
-            duration: 15 * 24 * 60 * 60 * 1000,
-            percent: 85,
-            type: "project",
-            style: {
-                background: "orange",
-                main: "rgba(109,174,242,1)"
-            }
-            // collapsed: true,
-        },
-        {
-            id: 2,
-            label: "With great power comes great responsibility",
-            user:
-                '<a href="https://www.google.com/search?q=Peter+Parker" target="_blank" style="color:#0077c0;">Peter Parker</a>',
-            parentId: 1,
-            start: getDate(-24 * 20),
-            duration: 20 * 24 * 60 * 60 * 1000,
-            percent: 50,
-            select: "重要",
-            type: "milestone",
-            collapsed: true,
-            style: {
-                background: "red",
-                main: "rgba(240,143,145,1)"
-            }
-        },
-        {
-            id: 3,
-            label: "Courage is being scared to death, but saddling up anyway.",
-            user:
-                '<a href="https://www.google.com/search?q=John+Wayne" target="_blank" style="color:#0077c0;">John Wayne</a>',
-            parentId: 2,
-            select: "普通",
-            start: getDate(-24 * 3),
-            duration: 2 * 24 * 60 * 60 * 1000,
-            percent: 100,
-            type: "task",
-            style: {
-                background: "rgba(255,248,242,1)",
-                main: "rgba(255,190,114,1)"
-            }
-        },
-        {
-            id: 4,
-            label: "Put that toy AWAY!",
-            user:
-                '<a href="https://www.google.com/search?q=Clark+Kent" target="_blank" style="color:#0077c0;">Clark Kent</a>',
-            start: getDate(-24 * 2),
-            duration: 2 * 24 * 60 * 60 * 1000,
-            select: "紧急",
-            percent: 50,
-            type: "task",
-            dependentOn: [3],
-            style: {
-                background: "rgba(235,248,240,1)",
-                main: "rgba(137,213,166,1)"
-            }
-        },
-        {
-            id: 5,
-            label: "Put that toy AWAY!",
-            select: "紧急",
-            user:
-                '<a href="https://www.google.com/search?q=Clark+Kent" target="_blank" style="color:#0077c0;">Clark Kent</a>',
-            start: getDate(1 * 24),
-            end: getDate(1 * 24),
-            // duration: 1 * 24 * 60 * 60 * 1000,
-            percent: 50,
-            type: "task",
-            dependentOn: [3],
-            style: {
-                background: "rgba(235,248,240,1)",
-                main: "rgba(137,213,166,1)"
-            }
-        }
-    ];
-
-    export default {
-        name: "briGantt",
-        components: {},
-        props: {
-            simpleDataColor: String,
-
-            tasks: Array,
-            options: {
-                type: Object,
-                default () {
-                    return {};
-                }
-            },
-            value: {
-                type: Object,
-                default () {
-                    return {};
-                }
-            },
-            propsObj: {
-                type: Object,
-                default () {
-                    return {};
-                }
-            },
-            // 是否展示示例数据
-            showEs: {
-                type: Boolean,
-                default: false
-            },
-            title: String,
-            // 展示类型， 分图标和表格，默认表格
-            type: {
-                type: String,
-                default: "table"
-            },
-            dimension: {
-                type: String,
-                default: "quarter"
-            },
-            showCloumns: {
-                type: Boolean,
-                default: true
-            },
-            table: Array,
-            // 距离今天个数
-            count: {
-                type: Number,
-                default: 5
-            },
-            // 展示日期间隔
-            step: {
-                type: Number,
-                default: 1
-            },
-            canClick: {
-                type: Boolean,
-                default: false
-            }
-        },
-        computed: {
-            // 默认列表
-            defaultTasks () {
-                if (this.showEs) {
-                    return tasks;
-                } else {
-                    return this.tasks || [];
-                }
-            },
-            // 表格宽度
-            tableWidth () {
-                let timeDataWidth = this.simpleData.length * 50;
-                let clientWidth = this.clientWidth;
-                if (this.computedCountStep.stepKind === "month") {
-                    timeDataWidth = this.timeData.length * 3;
-                }
-                if (timeDataWidth < clientWidth) {
-                    return "100%";
-                } else {
-                    return timeDataWidth + "px";
-                }
-            },
-            minTdWidth () {
-                let minWidth = 2;
-                if (this.tableWidth.includes("px")) {
-                    minWidth = parseInt(this.tableWidth) / this.timeData.length;
-                } else {
-                    minWidth = parseInt(this.clientWidth) / this.timeData.length;
-                }
-                minWidth > 20 && (minWidth = 2);
-                return minWidth + "px";
-            },
-            // 间隔及时间,当前选择时间维度
-            computedCountStep () {
-                this.refreshStepCount();
-                return this.dimensionObject[this.dimension] || { count: this.count, step: this.step };
-            },
-            // 任务数据
-            taskData () {
-                /**
-                 * task 默认数据
-                 */
-                let tasks = this.defaultTasks;
-                for (let task of tasks) {
-                    if (typeof task.x === "undefined") {
-                        task.x = 0;
-                    }
-                    if (typeof task.y === "undefined") {
-                        task.y = 0;
-                    }
-                    if (typeof task.width === "undefined") {
-                        task.width = 0;
-                    }
-                    if (typeof task.height === "undefined") {
-                        task.height = 0;
-                    }
-                    if (typeof task.mouseOver === "undefined") {
-                        task.mouseOver = false;
-                    }
-                    if (typeof task.collapsed === "undefined") {
-                        task.collapsed = false;
-                    }
-                    if (typeof task.dependentOn === "undefined") {
-                        task.dependentOn = [];
-                    }
-                    if (typeof task.parentId === "undefined") {
-                        task.parentId = null;
-                    }
-                    if (typeof task.style === "undefined") {
-                        task.style = {};
-                    }
-                    if (typeof task.children === "undefined") {
-                        task.children = [];
-                    }
-                    if (typeof task.allChildren === "undefined") {
-                        task.allChildren = [];
-                    }
-                    if (typeof task.parents === "undefined") {
-                        task.parents = [];
-                    }
-                    if (typeof task.parent === "undefined") {
-                        task.parent = null;
-                    }
-                    if (typeof task.startTime === "undefined") {
-                        task.startTime = new Date(task.start).valueOf();
-                    }
-                    if (typeof task.endTime === "undefined" && task.hasOwnProperty("end")) {
-                        task.endTime = new Date(task.end).valueOf();
-                    } else if (typeof task.endTime === "undefined" && task.hasOwnProperty("duration")) {
-                        task.endTime = task.startTime + task.duration - (1 * 24 * 60 * 60 * 1000);
-                    }
-                    if (typeof task.duration === "undefined" && task.hasOwnProperty("endTime")) {
-                        task.duration = task.endTime - task.startTime;
-                    }
-                }
-                return tasks;
-            },
-            // 时间数据
-            simpleData () {
-                // 小于今天
-                let { count, step, stepKind } = this.computedCountStep;
-                let data = [
-                    { key: getDate(0),
-                      endKey: getDate((step - 1) * 24 + 23.9999),
-                      name: "今天",
-                      colspan: 1,
-                      fullName: this.$dateFormat(getDate(0), "yyyy-MM-dd"),
-                      style: { color: this.simpleDataColor, fontWeight: 500 },
-                      now: true
-                    }
-                ];
-                let preCount = this.preCount * count + count;
-                let nextCount = this.nextCount * count + count;
-                for (let i = -step; i >= -(preCount * step); i -= step) {
-                    let key = stepKind === "month" ? getMonth(i) : getDate(i * 24);
-                    data.unshift({
-                        colspan: 1,
-                        key: key,
-                        endKey: getDate((i + step - 1) * 24 + 23.9999),
-                        name: this.getDayName(key, stepKind),
-                        fullName: this.$dateFormat(key, "yyyy-MM-dd"),
-                        style: this.$dateFormat(key, "d") == "1" && { fontWeight: 500 }
-                    });
-                }
-                // 大于今天
-                for (let i = step; i <= nextCount * step; i += step) {
-                    let key = stepKind === "month" ? getMonth(i) : getDate(i * 24);
-                    data.push({
-                        colspan: 1,
-                        key: key,
-                        endKey: getDate((i + step - 1) * 24 + 23.9999),
-                        name: this.getDayName(key, stepKind),
-                        fullName: this.$dateFormat(key, "yyyy-MM-dd"),
-                        style: this.$dateFormat(key, "d") == "1" && { fontWeight: 500 }
-                    });
-                }
-                return data;
-            },
-            timeData () {
-                let { count, step, stepKind } = this.computedCountStep;
-                let data = [];
-                let preCount = this.preCount * count + count;
-                let nextCount = this.nextCount * count + count;
-                let startTime = -(preCount * step); // 个数
-                let endTime = nextCount * step;
-                // 年度以月为分隔符
-                if (stepKind === "month") {
-                    startTime = (getMonth(-preCount) - getMonth(0)) / 24 / 60 / 60 / 1000;
-                    endTime = (getMonth(nextCount) - getMonth(0)) / 24 / 60 / 60 / 1000;
-                }
-                for (let i = startTime; i <= endTime; i++) {
-                    let key = getDate(i * 24);
-                    data.push({
-                        now: this.$dateFormat(key, "yyyy-MM-dd") === this.$dateFormat(new Date(), "yyyy-MM-dd"),
-                        key: key,
-                        endKey: getDate(i * 24 + 23.9999),
-                        name: this.getDayName(key, stepKind),
-                        fullName: this.$dateFormat(key, "yyyy-MM-dd")
-                    });
-                }
-                return data;
-            },
-            // 任务时间结合数据
-            computedData () {
-                return this.taskData.map(taskItem => {
-                    let tr = [];
-                    this.timeData.forEach(timeItem => {
-                        let flag = this.filterTaskDate(taskItem, timeItem);
-                        if (flag) {
-                            let isEndStep = new Date(timeItem.endKey) > new Date(taskItem.endTime);
-                            if (tr[tr.length - 1] && tr[tr.length - 1].isApply) {
-                                tr[tr.length - 1].colspan++;
-                                // 判断是不是结束日期,当前节点日期startEnd endTime, endKey
-                                if (isEndStep) {
-                                    tr[tr.length - 1].isEndStep = isEndStep;
-                                }
-                            } else {
-                                let defaultStyle = {
-                                    background: "rgba(232,243,253,1)",
-                                    border: "1px solid rgba(109,174,242,1)",
-                                    main: "rgba(109,174,242,1)"
-                                };
-                                let obj = {
-                                    colspan: 1,
-                                    ...timeItem,
-                                    style: taskItem.style || defaultStyle,
-                                    task: taskItem,
-                                    isApply: true
-                                };
-                                if (isEndStep) {
-                                    obj.isEndStep = isEndStep;
-                                }
-                                tr.push(obj);
-                            }
-
-                        } else {
-                            let obj = {
-                                colspan: 1,
-                                ...timeItem,
-                                task: taskItem,
-                                isApply: false
-                            };
-                            tr.push(obj);
-                        }
-                    });
-                    return tr;
-                });
-            },
-
-            theme () {
-                return this.propsObj.theme || {};
-            },
-            themeName () {
-                return this.theme.name;
-            }
-        },
-        data () {
-            return {
-                // 当前客户端宽度
-                clientWidth: 0,
-                // 向下点了几次
-                nextCount: 0,
-                // 向上点了几次
-                preCount: 0,
-                // 时间维度
-                dimensionObject: {
-                    doubleWeek: { name: "按周", count: 3, step: 1, stepKind: "day" },
-                    week: { name: "双周", count: 7, step: 1, stepKind: "day" },
-                    month: { name: "按月", count: 7, step: 2, stepKind: "day" },
-                    quarter: { name: "季度", count: 9, step: 5, stepKind: "day" },
-                    year: { name: "按年", count: 6, step: 1, stepKind: "month" }
-                },
-                nowOffsetLeft: 0
-            };
-        },
-        created () {
-            this.init();
-        },
-        mounted () {
-            // 宽度调整
-            window.onresize = this.refreshWidth;
-        },
-        destroyed () {
-            window.onresize = null;
-        },
-        methods: {
-            init () {
-                // 赋初值
-                setTimeout(() => {
-                    this.refreshWidth();
-                });
-            },
-            // 比较时间
-            filterTaskDate (taskItem, timeItem) {
-                let flag = (new Date(taskItem.startTime) <= new Date(timeItem.endKey)) && (taskItem.endTime ? ((new Date(timeItem.key) <= new Date(taskItem.endTime))) : taskItem.endInfinite);
-                return flag;
-            },
-            // 获得日期显示格式
-            getDayName (key, stepKind) {
-                let name = this.$dateFormat(key, "M月d日");
-                if (name === "1日") {
-                    name = this.$dateFormat(key, "M月d日");
-                }
-                if (stepKind === "month") {
-                    name = this.$dateFormat(key, "M月");
-                    if (name === "1月") {
-                        name = `${this.$dateFormat(key, "yyyy年M月")}`;
-                    }
-                }
-                return name;
-            },
-            // 左右按钮重置
-            refreshStepCount () {
-                this.preCount = 0;
-                this.nextCount = 0;
-            },
-            // 重新计算宽度
-            refreshWidth () {
-                this.clientWidth = this.$refs.briGanttArea ? this.$refs.briGanttArea.clientWidth : 0;
-            },
-            // 重新渲染
-            refresh () {
-
-            },
-            // 绑定同步滚动
-            handleScroll (el, scrollList) {
-                scrollList.forEach(({ref, direction} = item) => {
-                    this.$refs[ref] && (this.$refs[ref][direction] = el.target[direction]);
-                });
-            },
-            // 点击上一节点
-            preTime () {
-                let briGanttTimer = this.$refs.briGanttTimer;
-                let timerWidth = briGanttTimer.clientWidth; // 盒子宽度
-                let scrollLeft = briGanttTimer.scrollLeft; // 滚动距离
-                if (scrollLeft === 0) {
-                    // 已经滑到尽头，加载时间数据
-                    this.preCount++;
-                    this.$nextTick(() => {
-                        this.slideTo(briGanttTimer, scrollLeft - timerWidth);
-                    });
-                } else {
-                    this.slideTo(briGanttTimer, scrollLeft - timerWidth);
-                }
-            },
-            // 点击下一节点
-            nextTime () {
-                let briGanttTimer = this.$refs.briGanttTimer;
-                let timerWidth = briGanttTimer.clientWidth; // 盒子宽度
-                let tableWidth = parseInt(this.tableWidth); // table 总宽度
-                let scrollLeft = briGanttTimer.scrollLeft; // 滚动距离
-                let distance = tableWidth - timerWidth; // 当前滚动条距离顶部的距离
-                if (scrollLeft < distance) {
-                    // 未滑到尽头
-                    this.slideTo(briGanttTimer, scrollLeft + timerWidth);
-                } else {
-                    // 已经滑到尽头，加载时间数据
-                    this.nextCount++;
-                    this.$nextTick(() => {
-                        this.slideTo(briGanttTimer, scrollLeft + timerWidth);
-                    });
-                }
-            },
-            // 滚动到指定位置 增加滚动效果
-            slideTo (ref, target) {
-                let currScrollLeft = ref.scrollLeft; // 当前的距离
-                let distance = target - currScrollLeft;
-                let speed = distance / 10; // 每时刻速度
-                let speedTarget = currScrollLeft + speed;
-                let timer = setInterval(function () {
-                    if (distance > 0 ? (speedTarget > target) : (speedTarget < target)) {
-                        clearInterval(timer);
-                    } else {
-                        ref.scrollTo(speedTarget, 0);
-                        speedTarget += speed;
-                    }
-                }, 10);
-            },
-            // 行点击
-            clickRow (col) {
-                this.canClick && this.$emit("clickRow", col.task, col);
-            }
-        }
-    };
-</script>
-
-<style lang="less">
-    .briGantt {
-        width: 100%;
-        height: 100%;
-        color: #656565;
-        font-size: @smallSize;
-        line-height: 28px;
-        position: relative;
-        display: flex;
-        overflow: auto;
-        flex-direction: column;
-
-        &-top {
-            display: flex;
-            height: 100%;
-            width: 100%;
-            justify-content: space-between;
-            position: absolute;
-        }
-
-        &-bottom {
-            width: 100%;
-            overflow: auto;
-            display: flex;
-            flex-direction: column;
-            margin-top: 38px;
-            background: @white;
-
-            &-title {
-                text-align: center;
-                border: 1px solid #EDEDED;
-                border-bottom: none;
-                line-height: 27px;
-                // margin: 10px 14px 0 14px;
-            }
-
-            &-content {
-                flex: 1;
-                display: flex;
-                overflow: auto;
-            }
-        }
-
-        // 表格渲染
-        &-tableBox {
-            width: 100%;
-            text-align: center;
-            border-collapse: collapse;
-            border-spacing: 0;
-
-            td,
-            th {
-                word-break: break-all;
-                word-wrap: break-word;
-                min-width: 50px;
-                height: 29px;
-                text-align: center;
-                // overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-                max-width: 200px;
-            }
-
-            .briGantt-chart-td {
-                height: 40px;
-            }
-
-            .briGantt-table-th-now {
-                color: @themeColor;
-            }
-        }
-
-        &-table {
-            &-tr {
-                border: 1px solid #EDEDED;
-            }
-
-            &-tr:nth-child(2n) {
-                background: rgba(244, 246, 249, 0.5119);
-            }
-
-            &-th {
-                background: #F4F8FF;
-                font-weight: 400;
-                color: rgba(101, 101, 101, 1);
-            }
-
-            &-td {
-                border-right: 1px solid #EDEDED;
-                font-weight: 400;
-                color: rgba(111, 111, 111, 1);
-
-                &-main {
-                    height: 28px;
-                    background: rgba(238, 238, 238, 0.5);
-                    border: 1px solid #f6f6f6;
-                }
-            }
-
-            &-td:last-of-type {
-                border: none;
-            }
-        }
-
-        &-chart {
-            &-td {
-                overflow: visible;
-
-                &-greyLine {
-                    border-top: 1px dashed #D5D5D5;
-                }
-
-                &-main {
-                    display: flex;
-                    width: 100%;
-                    height: 100%;
-                    align-items: center;
-                    justify-content: center;
-
-                    &-left,
-                    &-right {
-                        height: 100%;
-                        overflow: hidden;
-                    }
-
-                    &-right-auto {
-                        height: 100%;
-                        overflow: hidden;
-                        flex: 1;
-                    }
-
-                    &-center {
-                        height: 30px;
-                        border-radius: 4px;
-                        background: #f6f6f6;
-                        z-index: 1;
-                        min-width: 2px;
-
-                        .ms-ellipsis {
-                            border-radius: 4px;
-                            height: 100%;
-                            color: @white;
-                            text-align: left;
-                            padding-left: 10px;
-                            white-space: nowrap;
-                            text-overflow: ellipsis;
-                            overflow: hidden;
-                        }
-
-                        &-tooltip {
-                            white-space: normal;
-
-                            &-select {
-                                height: 5px;
-                                display: inline-block;
-                                vertical-align: middle;
-                                width: 5px;
-                                border-radius: 50%;
-                            }
-                        }
-                    }
-
-                    &-line {
-                        width: 100%;
-                        border-bottom: 1px solid #D5D5D5;
-                        font-weight: 400;
-                        color: rgba(74, 74, 74, 1);
-                        padding: 0 10px;
-                        transform: translateY(15px);
-                        text-align: left;
-                        height: 29px;
-                        font-size: @smallSize;
-                        white-space: nowrap;
-                        text-overflow: ellipsis;
-                        overflow: hidden;
-
-                        &-circle {
-                            display: block;
-                            width: 10px;
-                            height: 100%;
-                            min-width: 10px;
-
-                            .circle {
-                                display: block;
-                                width: 10px;
-                                height: 10px;
-                                border-radius: 50%;
-                                min-width: 10px;
-                                margin-top: 38px;
-                                background: #D5D5D5;
-                            }
-                        }
-                    }
-
-                    ;
-                }
-            }
-        }
-
-        // 蓝色虚线
-        &-line-now {
-            z-index: 9;
-            text-align: center;
-            background: transparent;
-
-            &::before {
-                content: "";
-                border-left: 1px dashed @themeColor;
-                position: absolute;
-                top: 25px;
-                bottom: 0px;
-                z-index: 9;
-            }
-
-            &::after {
-                content: "";
-                width: 6px;
-                height: 6px;
-                border-radius: 6px;
-                background: @themeColor;
-                position: absolute;
-                top: 25px;
-                margin-left: -3px;
-            }
-        }
-
-        // 时间轴
-        &-timer {
-            align-items: center;
-            position: relative;
-            float: right;
-            overflow: hidden;
-
-            &-main {
-                overflow: auto;
-                flex: 1;
-                height: 100%;
-                position: relative;
-            }
-
-            &-bg {
-                position: absolute;
-                background: #F4F8FF;
-                left: 0px;
-                right: 0px;
-                height: 28px;
-                border-radius: 28px;
-            }
-
-            &-icon {
-                background: #F4F8FF;
-                color: #fff;
-                width: 28px;
-                height: 28px;
-                min-width: 28px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                position: absolute;
-                z-index: 2;
-                top: 0px;
-                background: #F2F8FF;
-
-                &:hover {
-                    color: #fff;
-                }
-
-                i {
-                    display: block;
-                    width: 16px;
-                    height: 16px;
-                    border-radius: 16px;
-                    font-size: 13px;
-                    background: @themeColor;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                }
-
-                &-left {
-                    left: -1px;
-                    border-top-left-radius: 28px;
-                    border-bottom-left-radius: 28px;
-                }
-
-                &-right {
-                    right: -1px;
-                    border-top-right-radius: 28px;
-                    border-bottom-right-radius: 28px;
-                }
-            }
-        }
-
-        // 区域映射
-        &-data {
-            flex: 1;
-            overflow: auto;
-            position: relative;
-
-            &-table {}
-
-            &-chart {}
-
-            &::-webkit-scrollbar {
-                height: 0px;
-            }
-        }
-
-        // table 列表映射
-        &-tabledata {
-            overflow-y: auto;
-            border-right: none;
-        }
-    }
-</style>
+<template>
+    <div class="briGantt">
+        <div class="briGantt-top">
+            <div class="bri-scrollbar0">
+                <slot></slot>
+            </div>
+            <!-- 时间渲染 -->
+            <div
+                class="briGantt-timer"
+                :style="{width: clientWidth + 'px'}"
+            >
+                <a
+                    class="briGantt-timer-icon briGantt-timer-icon-left"
+                    @click="preTime"
+                >
+                    <Icon type="ios-arrow-back" />
+                </a>
+                <div class="briGantt-timer-bg"></div>
+                <div
+                    class="bri-scrollbar0 briGantt-timer-main"
+                    ref="briGanttTimer"
+                    v-on:scroll="handleScroll($event, [{ ref: 'briGanttArea', direction: 'scrollLeft' }])"
+                >
+                    <table
+                        :style="{tableLayout:'fixed', width: tableWidth}"
+                        class="briGantt-tableBox"
+                    >
+                        <thead class="briGantt-table-thead">
+                            <tr>
+                                <th
+                                    class="briGantt-table-th"
+                                    v-for="timeItem in simpleData"
+                                    :key="timeItem.key"
+                                    :colspan="timeItem.colspan"
+                                    :style="{...timeItem.style}"
+                                >
+                                    <Tooltip
+                                        :content="timeItem.fullName"
+                                        placement="top"
+                                        :transfer="true"
+                                        :transfer-class-name="`briGantt-transfer-tooltip-${themeName}`"
+                                    >
+                                        {{ timeItem.name }}
+                                    </Tooltip>
+                                    <div
+                                        v-if="timeItem.now"
+                                        class="briGantt-line-now"
+                                    ></div>
+                                </th>
+                            </tr>
+                        </thead>
+                    </table>
+                </div>
+                <a
+                    class="briGantt-timer-icon briGantt-timer-icon-right"
+                    @click="nextTime"
+                >
+                    <Icon type="ios-arrow-forward" />
+                </a>
+            </div>
+        </div>
+        <div class="briGantt-bottom">
+            <div
+                class="briGantt-bottom-title"
+                v-if="title"
+            >{{ title }}</div>
+            <div class="briGantt-bottom-content">
+                <!-- 数据映射 -->
+                <div
+                    v-if="table"
+                    class="bri-scrollbar0 briGantt-tabledata"
+                    ref="briGanttColumn"
+                    v-on:scroll="handleScroll($event, [{ ref: 'briGanttArea', direction: 'scrollTop' }])"
+                >
+                    <table class="briGantt-tableBox briGantt-table">
+                        <tbody>
+                            <tr
+                                class="briGantt-table-tr"
+                                v-for="(row, rowIndex) in table"
+                                :key="rowIndex"
+                            >
+                                <td
+                                    class="briGantt-table-td"
+                                    v-for="(col, colIndex) in row"
+                                    :key="colIndex"
+                                    :colspan="col.colspan"
+                                    :rowspan="col.rowspan"
+                                    :style="col.rowspan > 1 ? {background: '#fff',padding: '0 10px',fontWeight:500} : {padding: '0 10px'}"
+                                    v-html="col.label"
+                                ></td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <!-- 区域映射 -->
+                <div
+                    class="briGantt-data bri-scrollbar"
+                    :class="`briGantt-data-${type}`"
+                    ref="briGanttArea"
+                    v-on:scroll="handleScroll($event, [{ ref: 'briGanttTimer', direction: 'scrollLeft' }, { ref:'briGanttColumn', direction:'scrollTop' }, { ref:'briGanttScrollbar', direction:'scrollLeft' }])"
+                >
+                    <table
+                        :style="{tableLayout:'fixed', width: tableWidth}"
+                        class="briGantt-tableBox briGantt-table"
+                        border="0"
+                        cellspacing="0"
+                        cellpadding="0"
+                    >
+                        <tr v-if="computedData.length === 0">
+                            <td
+                                :colspan="timeData.length"
+                                class="briGantt-table-td"
+                            >暂无内容</td>
+                        </tr>
+                        <tbody v-if="type==='table'">
+                            <tr v-if="computedData.length === 0">
+                                <td
+                                    :colspan="timeData.length"
+                                    class="briGantt-table-td"
+                                >暂无内容</td>
+                            </tr>
+                            <tr
+                                class="briGantt-table-tr"
+                                v-for="(taskItem, taskIndex) in computedData"
+                                :key="taskIndex"
+                                style="border-left: none"
+                            >
+                                <td
+                                    class="briGantt-table-td"
+                                    v-for="(timeItem, timeIndex) in taskItem"
+                                    :key="timeIndex"
+                                    :colspan="timeItem.colspan"
+                                >
+                                    <slot
+                                        v-if="timeItem.isApply"
+                                        name="table"
+                                        v-bind:task="timeItem.task"
+                                        v-bind:time="timeItem"
+                                    >
+                                        <div
+                                            class="briGantt-table-td-main"
+                                            :style="timeItem.style"
+                                        ></div>
+                                    </slot>
+                                    <slot
+                                        v-else
+                                        name="tabletd"
+                                        v-bind:preTime="taskItem[timeIndex-1]"
+                                        v-bind:nextTime="taskItem[timeIndex+1]"
+                                        v-bind:task="timeItem.task"
+                                        v-bind:time="timeItem"
+                                    ></slot>
+                                </td>
+                            </tr>
+                        </tbody>
+                        <tbody v-else-if="type==='chart'">
+                            <tr
+                                class="briGantt-chart-tr"
+                                v-for="(taskItem, taskIndex) in computedData"
+                                :key="taskIndex"
+                            >
+                                <td
+                                    class="briGantt-chart-td"
+                                    v-for="(timeItem, timeIndex) in taskItem"
+                                    :key="timeIndex"
+                                    :colspan="timeItem.colspan"
+                                >
+                                    <div
+                                        v-if="timeItem.isApply"
+                                        class="briGantt-chart-td-main"
+                                    >
+                                        <slot
+                                            name="chart"
+                                            v-bind:task="timeItem.task"
+                                            v-bind:chartItem="timeItem"
+                                        >
+                                            <Tooltip
+                                                placement="right"
+                                                transfer
+                                                :transfer-class-name="`briGantt-transfer-tooltip-${themeName}`"
+                                                style="width:100%"
+                                            >
+                                                <div
+                                                    class="briGantt-chart-td-main-center"
+                                                    :style="{
+                                                        background:$getColor(timeItem.style.background),
+                                                        minWidth: minTdWidth,
+                                                        border: `1px solid ${timeItem.style.background}`,
+                                                        padding: timeItem.task.progressField == 100 ? '' : '1px',
+                                                        cursor: canClick ? 'pointer' : ''
+                                                    }"
+                                                    @click="clickRow(timeItem)"
+                                                >
+                                                    <slot
+                                                        name="chartCenter"
+                                                        v-bind:task="timeItem.task"
+                                                        v-bind:chartItem="timeItem"
+                                                    >
+                                                        <div
+                                                            class="ms-ellipsis"
+                                                            :style="{
+                                                                background:timeItem.style.background,
+                                                                width: `${timeItem.task.progressField}%`
+                                                            }"
+                                                        >
+                                                            {{ timeItem.task.label }}
+                                                        </div>
+                                                    </slot>
+                                                </div>
+                                                <div
+                                                    slot="content"
+                                                    class="briGantt-chart-td-main-center-tooltip"
+                                                >
+                                                    <span
+                                                        class="briGantt-chart-td-main-center-tooltip-select"
+                                                        :style="{...timeItem.style}"
+                                                    >
+                                                    </span>
+                                                    {{timeItem.task.select}}
+                                                    <div>完成度:{{timeItem.task.progressField}}%</div>
+                                                    <div>{{ timeItem.task.label }}</div>
+                                                </div>
+                                            </Tooltip>
+                                        </slot>
+                                    </div>
+                                    <slot
+                                        v-else
+                                        name="charttd"
+                                        v-bind:task="timeItem.task"
+                                        v-bind:time="timeItem"
+                                        v-bind:preTime="taskItem[timeIndex-1]"
+                                        v-bind:nextTime="taskItem[timeIndex+1]"
+                                    >
+                                        <div class="briGantt-chart-td-greyLine"></div>
+                                    </slot>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+
+            <!-- 底部滚动条 -->
+            <!-- <div class="briGantt-scroll">
+                <div class="briGantt-scroll-main"
+                    ref="briGanttScrollbar"
+                    :style="{ width: clientWidth + 'px' }"
+                    v-on:scroll="handleScroll($event, [{ ref: 'briGanttTimer', direction: 'scrollLeft' }, { ref:'briGanttArea', direction:'scrollLeft' }, { ref:'briGanttBlue', direction:'scrollLeft' }])">
+                    <div :style="{width: tableWidth}"></div>
+                </div>
+            </div> -->
+        </div>
+    </div>
+</template>
+<script>
+    function getDate (hours) {
+        const currentDate = new Date();
+        const currentYear = currentDate.getFullYear();
+        const currentMonth = currentDate.getMonth();
+        const currentDay = currentDate.getDate();
+        const timeStamp = new Date(
+            currentYear,
+            currentMonth,
+            currentDay,
+            0,
+            0,
+            0
+        ).getTime();
+        return new Date(timeStamp + hours * 60 * 60 * 1000).getTime();
+    }
+    function getMonth (N) {
+        const currentDate = new Date();
+        const currentYear = currentDate.getFullYear();
+        const currentMonth = currentDate.getMonth();
+        return new Date(currentYear, currentMonth + N, 1).getTime();
+    }
+    // 示例数据
+    let tasks = [
+        {
+            id: 1,
+            label: "Make some noise",
+            user:
+                '<a href="https://www.google.com/search?q=John+Doe" target="_blank" style="color:#0077c0;">John Doe</a>',
+            start: getDate(-24 * 5),
+            end: getDate(0),
+            select: "紧急",
+            duration: 15 * 24 * 60 * 60 * 1000,
+            percent: 85,
+            type: "project",
+            style: {
+                background: "orange",
+                main: "rgba(109,174,242,1)"
+            }
+            // collapsed: true,
+        },
+        {
+            id: 2,
+            label: "With great power comes great responsibility",
+            user:
+                '<a href="https://www.google.com/search?q=Peter+Parker" target="_blank" style="color:#0077c0;">Peter Parker</a>',
+            parentId: 1,
+            start: getDate(-24 * 20),
+            duration: 20 * 24 * 60 * 60 * 1000,
+            percent: 50,
+            select: "重要",
+            type: "milestone",
+            collapsed: true,
+            style: {
+                background: "red",
+                main: "rgba(240,143,145,1)"
+            }
+        },
+        {
+            id: 3,
+            label: "Courage is being scared to death, but saddling up anyway.",
+            user:
+                '<a href="https://www.google.com/search?q=John+Wayne" target="_blank" style="color:#0077c0;">John Wayne</a>',
+            parentId: 2,
+            select: "普通",
+            start: getDate(-24 * 3),
+            duration: 2 * 24 * 60 * 60 * 1000,
+            percent: 100,
+            type: "task",
+            style: {
+                background: "rgba(255,248,242,1)",
+                main: "rgba(255,190,114,1)"
+            }
+        },
+        {
+            id: 4,
+            label: "Put that toy AWAY!",
+            user:
+                '<a href="https://www.google.com/search?q=Clark+Kent" target="_blank" style="color:#0077c0;">Clark Kent</a>',
+            start: getDate(-24 * 2),
+            duration: 2 * 24 * 60 * 60 * 1000,
+            select: "紧急",
+            percent: 50,
+            type: "task",
+            dependentOn: [3],
+            style: {
+                background: "rgba(235,248,240,1)",
+                main: "rgba(137,213,166,1)"
+            }
+        },
+        {
+            id: 5,
+            label: "Put that toy AWAY!",
+            select: "紧急",
+            user:
+                '<a href="https://www.google.com/search?q=Clark+Kent" target="_blank" style="color:#0077c0;">Clark Kent</a>',
+            start: getDate(1 * 24),
+            end: getDate(1 * 24),
+            // duration: 1 * 24 * 60 * 60 * 1000,
+            percent: 50,
+            type: "task",
+            dependentOn: [3],
+            style: {
+                background: "rgba(235,248,240,1)",
+                main: "rgba(137,213,166,1)"
+            }
+        }
+    ];
+
+    export default {
+        name: "briGantt",
+        components: {},
+        props: {
+            simpleDataColor: String,
+
+            tasks: Array,
+            options: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            value: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            propsObj: {
+                type: Object,
+                default () {
+                    return {};
+                }
+            },
+            // 是否展示示例数据
+            showEs: {
+                type: Boolean,
+                default: false
+            },
+            title: String,
+            // 展示类型， 分图标和表格，默认表格
+            type: {
+                type: String,
+                default: "table"
+            },
+            dimension: {
+                type: String,
+                default: "quarter"
+            },
+            showCloumns: {
+                type: Boolean,
+                default: true
+            },
+            table: Array,
+            // 距离今天个数
+            count: {
+                type: Number,
+                default: 5
+            },
+            // 展示日期间隔
+            step: {
+                type: Number,
+                default: 1
+            },
+            canClick: {
+                type: Boolean,
+                default: false
+            }
+        },
+        computed: {
+            // 默认列表
+            defaultTasks () {
+                if (this.showEs) {
+                    return tasks;
+                } else {
+                    return this.tasks || [];
+                }
+            },
+            // 表格宽度
+            tableWidth () {
+                let timeDataWidth = this.simpleData.length * 50;
+                let clientWidth = this.clientWidth;
+                if (this.computedCountStep.stepKind === "month") {
+                    timeDataWidth = this.timeData.length * 3;
+                }
+                if (timeDataWidth < clientWidth) {
+                    return "100%";
+                } else {
+                    return timeDataWidth + "px";
+                }
+            },
+            minTdWidth () {
+                let minWidth = 2;
+                if (this.tableWidth.includes("px")) {
+                    minWidth = parseInt(this.tableWidth) / this.timeData.length;
+                } else {
+                    minWidth = parseInt(this.clientWidth) / this.timeData.length;
+                }
+                minWidth > 20 && (minWidth = 2);
+                return minWidth + "px";
+            },
+            // 间隔及时间,当前选择时间维度
+            computedCountStep () {
+                this.refreshStepCount();
+                return this.dimensionObject[this.dimension] || { count: this.count, step: this.step };
+            },
+            // 任务数据
+            taskData () {
+                /**
+                 * task 默认数据
+                 */
+                let tasks = this.defaultTasks;
+                for (let task of tasks) {
+                    if (typeof task.x === "undefined") {
+                        task.x = 0;
+                    }
+                    if (typeof task.y === "undefined") {
+                        task.y = 0;
+                    }
+                    if (typeof task.width === "undefined") {
+                        task.width = 0;
+                    }
+                    if (typeof task.height === "undefined") {
+                        task.height = 0;
+                    }
+                    if (typeof task.mouseOver === "undefined") {
+                        task.mouseOver = false;
+                    }
+                    if (typeof task.collapsed === "undefined") {
+                        task.collapsed = false;
+                    }
+                    if (typeof task.dependentOn === "undefined") {
+                        task.dependentOn = [];
+                    }
+                    if (typeof task.parentId === "undefined") {
+                        task.parentId = null;
+                    }
+                    if (typeof task.style === "undefined") {
+                        task.style = {};
+                    }
+                    if (typeof task.children === "undefined") {
+                        task.children = [];
+                    }
+                    if (typeof task.allChildren === "undefined") {
+                        task.allChildren = [];
+                    }
+                    if (typeof task.parents === "undefined") {
+                        task.parents = [];
+                    }
+                    if (typeof task.parent === "undefined") {
+                        task.parent = null;
+                    }
+                    if (typeof task.startTime === "undefined") {
+                        task.startTime = new Date(task.start).valueOf();
+                    }
+                    if (typeof task.endTime === "undefined" && task.hasOwnProperty("end")) {
+                        task.endTime = new Date(task.end).valueOf();
+                    } else if (typeof task.endTime === "undefined" && task.hasOwnProperty("duration")) {
+                        task.endTime = task.startTime + task.duration - (1 * 24 * 60 * 60 * 1000);
+                    }
+                    if (typeof task.duration === "undefined" && task.hasOwnProperty("endTime")) {
+                        task.duration = task.endTime - task.startTime;
+                    }
+                }
+                return tasks;
+            },
+            // 时间数据
+            simpleData () {
+                // 小于今天
+                let { count, step, stepKind } = this.computedCountStep;
+                let data = [
+                    { key: getDate(0),
+                      endKey: getDate((step - 1) * 24 + 23.9999),
+                      name: "今天",
+                      colspan: 1,
+                      fullName: this.$dateFormat(getDate(0), "yyyy-MM-dd"),
+                      style: { color: this.simpleDataColor, fontWeight: 500 },
+                      now: true
+                    }
+                ];
+                let preCount = this.preCount * count + count;
+                let nextCount = this.nextCount * count + count;
+                for (let i = -step; i >= -(preCount * step); i -= step) {
+                    let key = stepKind === "month" ? getMonth(i) : getDate(i * 24);
+                    data.unshift({
+                        colspan: 1,
+                        key: key,
+                        endKey: getDate((i + step - 1) * 24 + 23.9999),
+                        name: this.getDayName(key, stepKind),
+                        fullName: this.$dateFormat(key, "yyyy-MM-dd"),
+                        style: this.$dateFormat(key, "d") == "1" && { fontWeight: 500 }
+                    });
+                }
+                // 大于今天
+                for (let i = step; i <= nextCount * step; i += step) {
+                    let key = stepKind === "month" ? getMonth(i) : getDate(i * 24);
+                    data.push({
+                        colspan: 1,
+                        key: key,
+                        endKey: getDate((i + step - 1) * 24 + 23.9999),
+                        name: this.getDayName(key, stepKind),
+                        fullName: this.$dateFormat(key, "yyyy-MM-dd"),
+                        style: this.$dateFormat(key, "d") == "1" && { fontWeight: 500 }
+                    });
+                }
+                return data;
+            },
+            timeData () {
+                let { count, step, stepKind } = this.computedCountStep;
+                let data = [];
+                let preCount = this.preCount * count + count;
+                let nextCount = this.nextCount * count + count;
+                let startTime = -(preCount * step); // 个数
+                let endTime = nextCount * step;
+                // 年度以月为分隔符
+                if (stepKind === "month") {
+                    startTime = (getMonth(-preCount) - getMonth(0)) / 24 / 60 / 60 / 1000;
+                    endTime = (getMonth(nextCount) - getMonth(0)) / 24 / 60 / 60 / 1000;
+                }
+                for (let i = startTime; i <= endTime; i++) {
+                    let key = getDate(i * 24);
+                    data.push({
+                        now: this.$dateFormat(key, "yyyy-MM-dd") === this.$dateFormat(new Date(), "yyyy-MM-dd"),
+                        key: key,
+                        endKey: getDate(i * 24 + 23.9999),
+                        name: this.getDayName(key, stepKind),
+                        fullName: this.$dateFormat(key, "yyyy-MM-dd")
+                    });
+                }
+                return data;
+            },
+            // 任务时间结合数据
+            computedData () {
+                return this.taskData.map(taskItem => {
+                    let tr = [];
+                    this.timeData.forEach(timeItem => {
+                        let flag = this.filterTaskDate(taskItem, timeItem);
+                        if (flag) {
+                            let isEndStep = new Date(timeItem.endKey) > new Date(taskItem.endTime);
+                            if (tr[tr.length - 1] && tr[tr.length - 1].isApply) {
+                                tr[tr.length - 1].colspan++;
+                                // 判断是不是结束日期,当前节点日期startEnd endTime, endKey
+                                if (isEndStep) {
+                                    tr[tr.length - 1].isEndStep = isEndStep;
+                                }
+                            } else {
+                                let defaultStyle = {
+                                    background: "rgba(232,243,253,1)",
+                                    border: "1px solid rgba(109,174,242,1)",
+                                    main: "rgba(109,174,242,1)"
+                                };
+                                let obj = {
+                                    colspan: 1,
+                                    ...timeItem,
+                                    style: taskItem.style || defaultStyle,
+                                    task: taskItem,
+                                    isApply: true
+                                };
+                                if (isEndStep) {
+                                    obj.isEndStep = isEndStep;
+                                }
+                                tr.push(obj);
+                            }
+
+                        } else {
+                            let obj = {
+                                colspan: 1,
+                                ...timeItem,
+                                task: taskItem,
+                                isApply: false
+                            };
+                            tr.push(obj);
+                        }
+                    });
+                    return tr;
+                });
+            },
+
+            theme () {
+                return this.propsObj.theme || {};
+            },
+            themeName () {
+                return this.theme.name;
+            }
+        },
+        data () {
+            return {
+                // 当前客户端宽度
+                clientWidth: 0,
+                // 向下点了几次
+                nextCount: 0,
+                // 向上点了几次
+                preCount: 0,
+                // 时间维度
+                dimensionObject: {
+                    doubleWeek: { name: "按周", count: 3, step: 1, stepKind: "day" },
+                    week: { name: "双周", count: 7, step: 1, stepKind: "day" },
+                    month: { name: "按月", count: 7, step: 2, stepKind: "day" },
+                    quarter: { name: "季度", count: 9, step: 5, stepKind: "day" },
+                    year: { name: "按年", count: 6, step: 1, stepKind: "month" }
+                },
+                nowOffsetLeft: 0
+            };
+        },
+        created () {
+            this.init();
+        },
+        mounted () {
+            // 宽度调整
+            window.onresize = this.refreshWidth;
+        },
+        destroyed () {
+            window.onresize = null;
+        },
+        methods: {
+            init () {
+                // 赋初值
+                setTimeout(() => {
+                    this.refreshWidth();
+                });
+            },
+            // 比较时间
+            filterTaskDate (taskItem, timeItem) {
+                let flag = (new Date(taskItem.startTime) <= new Date(timeItem.endKey)) && (taskItem.endTime ? ((new Date(timeItem.key) <= new Date(taskItem.endTime))) : taskItem.endInfinite);
+                return flag;
+            },
+            // 获得日期显示格式
+            getDayName (key, stepKind) {
+                let name = this.$dateFormat(key, "M月d日");
+                if (name === "1日") {
+                    name = this.$dateFormat(key, "M月d日");
+                }
+                if (stepKind === "month") {
+                    name = this.$dateFormat(key, "M月");
+                    if (name === "1月") {
+                        name = `${this.$dateFormat(key, "yyyy年M月")}`;
+                    }
+                }
+                return name;
+            },
+            // 左右按钮重置
+            refreshStepCount () {
+                this.preCount = 0;
+                this.nextCount = 0;
+            },
+            // 重新计算宽度
+            refreshWidth () {
+                this.clientWidth = this.$refs.briGanttArea ? this.$refs.briGanttArea.clientWidth : 0;
+            },
+            // 重新渲染
+            refresh () {
+
+            },
+            // 绑定同步滚动
+            handleScroll (el, scrollList) {
+                scrollList.forEach(({ref, direction} = item) => {
+                    this.$refs[ref] && (this.$refs[ref][direction] = el.target[direction]);
+                });
+            },
+            // 点击上一节点
+            preTime () {
+                let briGanttTimer = this.$refs.briGanttTimer;
+                let timerWidth = briGanttTimer.clientWidth; // 盒子宽度
+                let scrollLeft = briGanttTimer.scrollLeft; // 滚动距离
+                if (scrollLeft === 0) {
+                    // 已经滑到尽头，加载时间数据
+                    this.preCount++;
+                    this.$nextTick(() => {
+                        this.slideTo(briGanttTimer, scrollLeft - timerWidth);
+                    });
+                } else {
+                    this.slideTo(briGanttTimer, scrollLeft - timerWidth);
+                }
+            },
+            // 点击下一节点
+            nextTime () {
+                let briGanttTimer = this.$refs.briGanttTimer;
+                let timerWidth = briGanttTimer.clientWidth; // 盒子宽度
+                let tableWidth = parseInt(this.tableWidth); // table 总宽度
+                let scrollLeft = briGanttTimer.scrollLeft; // 滚动距离
+                let distance = tableWidth - timerWidth; // 当前滚动条距离顶部的距离
+                if (scrollLeft < distance) {
+                    // 未滑到尽头
+                    this.slideTo(briGanttTimer, scrollLeft + timerWidth);
+                } else {
+                    // 已经滑到尽头，加载时间数据
+                    this.nextCount++;
+                    this.$nextTick(() => {
+                        this.slideTo(briGanttTimer, scrollLeft + timerWidth);
+                    });
+                }
+            },
+            // 滚动到指定位置 增加滚动效果
+            slideTo (ref, target) {
+                let currScrollLeft = ref.scrollLeft; // 当前的距离
+                let distance = target - currScrollLeft;
+                let speed = distance / 10; // 每时刻速度
+                let speedTarget = currScrollLeft + speed;
+                let timer = setInterval(function () {
+                    if (distance > 0 ? (speedTarget > target) : (speedTarget < target)) {
+                        clearInterval(timer);
+                    } else {
+                        ref.scrollTo(speedTarget, 0);
+                        speedTarget += speed;
+                    }
+                }, 10);
+            },
+            // 行点击
+            clickRow (col) {
+                this.canClick && this.$emit("clickRow", col.task, col);
+            }
+        }
+    };
+</script>
+
+<style lang="less">
+    .briGantt {
+        width: 100%;
+        height: 100%;
+        color: #656565;
+        font-size: @smallSize;
+        line-height: 28px;
+        position: relative;
+        display: flex;
+        overflow: auto;
+        flex-direction: column;
+
+        &-top {
+            display: flex;
+            height: 100%;
+            width: 100%;
+            justify-content: space-between;
+            position: absolute;
+        }
+
+        &-bottom {
+            width: 100%;
+            overflow: auto;
+            display: flex;
+            flex-direction: column;
+            margin-top: 38px;
+            background: @white;
+
+            &-title {
+                text-align: center;
+                border: 1px solid #EDEDED;
+                border-bottom: none;
+                line-height: 27px;
+                // margin: 10px 14px 0 14px;
+            }
+
+            &-content {
+                flex: 1;
+                display: flex;
+                overflow: auto;
+            }
+        }
+
+        // 表格渲染
+        &-tableBox {
+            width: 100%;
+            text-align: center;
+            border-collapse: collapse;
+            border-spacing: 0;
+
+            td,
+            th {
+                word-break: break-all;
+                word-wrap: break-word;
+                min-width: 50px;
+                height: 29px;
+                text-align: center;
+                // overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                max-width: 200px;
+            }
+
+            .briGantt-chart-td {
+                height: 40px;
+            }
+
+            .briGantt-table-th-now {
+                color: @themeColor;
+            }
+        }
+
+        &-table {
+            &-tr {
+                border: 1px solid #EDEDED;
+            }
+
+            &-tr:nth-child(2n) {
+                background: rgba(244, 246, 249, 0.5119);
+            }
+
+            &-th {
+                background: #F4F8FF;
+                font-weight: 400;
+                color: rgba(101, 101, 101, 1);
+            }
+
+            &-td {
+                border-right: 1px solid #EDEDED;
+                font-weight: 400;
+                color: rgba(111, 111, 111, 1);
+
+                &-main {
+                    height: 28px;
+                    background: rgba(238, 238, 238, 0.5);
+                    border: 1px solid #f6f6f6;
+                }
+            }
+
+            &-td:last-of-type {
+                border: none;
+            }
+        }
+
+        &-chart {
+            &-td {
+                overflow: visible;
+
+                &-greyLine {
+                    border-top: 1px dashed #D5D5D5;
+                }
+
+                &-main {
+                    display: flex;
+                    width: 100%;
+                    height: 100%;
+                    align-items: center;
+                    justify-content: center;
+
+                    &-left,
+                    &-right {
+                        height: 100%;
+                        overflow: hidden;
+                    }
+
+                    &-right-auto {
+                        height: 100%;
+                        overflow: hidden;
+                        flex: 1;
+                    }
+
+                    &-center {
+                        height: 30px;
+                        border-radius: 4px;
+                        background: #f6f6f6;
+                        z-index: 1;
+                        min-width: 2px;
+
+                        .ms-ellipsis {
+                            border-radius: 4px;
+                            height: 100%;
+                            color: @white;
+                            text-align: left;
+                            padding-left: 10px;
+                            white-space: nowrap;
+                            text-overflow: ellipsis;
+                            overflow: hidden;
+                        }
+
+                        &-tooltip {
+                            white-space: normal;
+
+                            &-select {
+                                height: 5px;
+                                display: inline-block;
+                                vertical-align: middle;
+                                width: 5px;
+                                border-radius: 50%;
+                            }
+                        }
+                    }
+
+                    &-line {
+                        width: 100%;
+                        border-bottom: 1px solid #D5D5D5;
+                        font-weight: 400;
+                        color: rgba(74, 74, 74, 1);
+                        padding: 0 10px;
+                        transform: translateY(15px);
+                        text-align: left;
+                        height: 29px;
+                        font-size: @smallSize;
+                        white-space: nowrap;
+                        text-overflow: ellipsis;
+                        overflow: hidden;
+
+                        &-circle {
+                            display: block;
+                            width: 10px;
+                            height: 100%;
+                            min-width: 10px;
+
+                            .circle {
+                                display: block;
+                                width: 10px;
+                                height: 10px;
+                                border-radius: 50%;
+                                min-width: 10px;
+                                margin-top: 38px;
+                                background: #D5D5D5;
+                            }
+                        }
+                    }
+
+                    ;
+                }
+            }
+        }
+
+        // 蓝色虚线
+        &-line-now {
+            z-index: 9;
+            text-align: center;
+            background: transparent;
+
+            &::before {
+                content: "";
+                border-left: 1px dashed @themeColor;
+                position: absolute;
+                top: 25px;
+                bottom: 0px;
+                z-index: 9;
+            }
+
+            &::after {
+                content: "";
+                width: 6px;
+                height: 6px;
+                border-radius: 6px;
+                background: @themeColor;
+                position: absolute;
+                top: 25px;
+                margin-left: -3px;
+            }
+        }
+
+        // 时间轴
+        &-timer {
+            align-items: center;
+            position: relative;
+            float: right;
+            overflow: hidden;
+
+            &-main {
+                overflow: auto;
+                flex: 1;
+                height: 100%;
+                position: relative;
+            }
+
+            &-bg {
+                position: absolute;
+                background: #F4F8FF;
+                left: 0px;
+                right: 0px;
+                height: 28px;
+                border-radius: 28px;
+            }
+
+            &-icon {
+                background: #F4F8FF;
+                color: #fff;
+                width: 28px;
+                height: 28px;
+                min-width: 28px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                position: absolute;
+                z-index: 2;
+                top: 0px;
+                background: #F2F8FF;
+
+                &:hover {
+                    color: #fff;
+                }
+
+                i {
+                    display: block;
+                    width: 16px;
+                    height: 16px;
+                    border-radius: 16px;
+                    font-size: 13px;
+                    background: @themeColor;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+
+                &-left {
+                    left: -1px;
+                    border-top-left-radius: 28px;
+                    border-bottom-left-radius: 28px;
+                }
+
+                &-right {
+                    right: -1px;
+                    border-top-right-radius: 28px;
+                    border-bottom-right-radius: 28px;
+                }
+            }
+        }
+
+        // 区域映射
+        &-data {
+            flex: 1;
+            overflow: auto;
+            position: relative;
+
+            &-table {}
+
+            &-chart {}
+
+            &::-webkit-scrollbar {
+                height: 0px;
+            }
+        }
+
+        // table 列表映射
+        &-tabledata {
+            overflow-y: auto;
+            border-right: none;
+        }
+    }
+</style>