bri-components 1.0.0

package/src/components/other/ZGantt.vue

@@ -0,0 +1,669 @@
+<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'}"
+                                                    >
+                                                    <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-scrollbar">
+                <div class="briGantt-scrollbar-main bri-scrollbar"
+                    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: {
+            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
+            }
+        },
+        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.$store.getters.systemConfig.themeColor, 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;
+        },
+        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 () {
+
+            },
+            dateFormat (date, fmt) {
+                let time = new Date(date);
+                let o = {
+                    "M+": time.getMonth() + 1, // 月份
+                    "d+": time.getDate(), // 日
+                    "h+": time.getHours(), // 小时
+                    "m+": time.getMinutes(), // 分
+                    "s+": time.getSeconds(), // 秒
+                    "q+": Math.floor((time.getMonth() + 3) / 3), // 季度
+                    "S": time.getMilliseconds() // 毫秒
+                };
+                if (/(y+)/.test(fmt)) {
+                    fmt = fmt.replace(RegExp.$1, (time.getFullYear() + "").substr(4 - RegExp.$1.length));
+                }
+                for (let k in o) {
+                    if (new RegExp("(" + k + ")").test(fmt)) {
+                        fmt = fmt.replace(
+                            RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
+                    }
+                }
+                return fmt;
+            },
+            // 绑定同步滚动
+            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);
+            }
+        },
+        filters: {
+
+        },
+        destroyed () {
+            window.onresize = null;
+        }
+    };
+</script>