vue甘特图来咯-时间联动

已于 2022-10-21 10:15:49 修改
阅读量1.1k 收藏 7
点赞数 2
分类专栏： 每天一个小功能
于 2022-10-20 17:18:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45191316/article/details/127402773
版权

甘特图 时间联动 鼠标事件 反转布局 动态背景
关键词由CSDN通过智能技术生成

最近项目需要甘特图功能又比较特殊（需要与时间联动），网上找的插件和别人写的有点满足不了需求所以自己弄了个简单的
代码写的烂（毕竟是初步功能，以后还要改的），不喜勿喷，欢迎指点
在这里插入图片描述

我们的服务宗旨是 能用就行 ，我们的目标是 人和项目有一个能跑就行

在这里插入图片描述

废话不多说，代码奉上，拿来即用
功能说明：
1.取整个盒子的宽度获取鼠标的偏移量计算时间（计算精度不是很高，但是能用就行）
2.甘特图宽度通过起始时间和结束时间计算，偏移的位置为数据的起始时间
3.甘特图部分div是反转的（需求是从底部开始显示往上叠加），反转后再把文字反过来就行了
4.时间变化背景随时间增加
5.鼠标移入位置的线也是通过盒子的宽度及鼠标偏移量计算的时间

<template>
    <!-- <div style="position: relative; height: 300px;">-->

    <div class="relation" ref="relationBox" @mousemove='mousemove'>
        
        <!-- 事件节点 -->
        <div class="node_box">
            <div class="gradientbg" :style="calcWidth()"></div>
            <div>
                <div @click="nodeEventClick(item)" v-for="(item, index) in nodeEvent" :style="calcLeft(item)"
                    class="item" :key="index">{{ item.name }}</div>
            </div>
            <div>
                <div v-for="(item, index) in nodeULDArr" :style="calcLeft(item)" class="ULDbox" :key="index">
                    <i class="iconfont" :class="item.icons"></i>
                </div>
            </div>
        </div>
        <!-- 甘特图 -->
        <div class="gant_box">
            <div v-for="(item, index) in gantArr" :style="calcdeviation(item)" class="gant_item" :key="index">
                <div class="speedbg" :style="calcbgWidth(item)"></div>
                <div class="txtLeft">{{ item.evName }}</div>
                <div v-for="(i, j) in item.evNode" @click="submitNode(item,i)" :style="calctxt(i,item)" class="txt" :key="j">{{ i.evNodeName }}</div>
            </div>
        </div>
        <!-- 鼠标线 -->
        <i class="line" :style="{ left: mouseX + 'px' }">{{ pointerTime() }}</i>

        <div class="search">搜索</div>
        <!-- <div @click="screen()"  class="screen">全屏</div> -->
        <div v-if="calc" class="m-div bg-color-1 interval">
            <div class="module_header_info" v-drag> <!--这有个拖拽功能-->
                <div class="module_title_1">时差计算</div>
                <close-btn @click.native="closePage" />
            </div>
            <div class="subject bg-color-2" ref="elem">
                <div v-for="(item,index) in intervalArr" :key="index">
                    <div class="flex_box">
                        <div>{{index+1}}</div>
                        <div class="selected">
                            {{item.evName}}：{{item.evNodeName}} <br/>
                            {{item.evNodeTime}}
                        </div>
                    </div>
                    <div class="flex_box difference">
                        <span>{{brr[index]}}</span>
                        <span><i class="iconfont icon-shichajisuan-jiantou"></i></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- </div> -->
</template>
<script>
//这里可以导入其他文件（比如： 组件， 工具 js， 第三方插件 js， json文件， 图片文件等等） 
//例如： import 《组件名称》 from '《组件路径》 ';

import closeBtn from "@/components/closeBtn.vue"
export default {
    name: 'relation',
    //import 引入的组件需要注入到对象中才能使用
    components: {
        closeBtn
    },
    props:{
        currentTime: {
            type: Number,
            // required: true,
        },
    },
    data() {
        //这里存放数据
        return {
            mouseX: 0,
            mouseY: 0,
            isWidth: null,
            isHeight: null,
            // itmes: null,
            // currentTime: 1656604800,
            startTime: 1656604800,
            endTime: 1656691199,
            // 事件节点数组
            nodeEvent: [
                {
                    nodeTime: '2022-07-01 00:05:01',
                    name: '降落',
                }, {
                    nodeTime: '2022-07-01 00:40:01',
                    name: '停入机位',
                }, {
                    nodeTime: '2022-07-01 02:00:01',
                    name: '开舱门-开始',
                }, {
                    nodeTime: '2022-07-01 02:05:01',
                    name: '开舱门-结束',
                }, {
                    nodeTime: '2022-07-01 06:00:01',
                    name: '机组下机-开始',
                }, {
                    nodeTime: '2022-07-01 07:00:01',
                    name: '机组下机-结束',
                }, {
                    nodeTime: '2022-07-01 08:00:01',
                    name: '消杀结束',
                }, {
                    nodeTime: '2022-07-01 10:00:01',
                    name: '卸机开始',
                }, {
                    nodeTime: '2022-07-01 15:00:01',
                    name: '加油开始',
                }, {
                    nodeTime: '2022-07-01 16:00:01',
                    name: '清污开始',
                }, {
                    nodeTime: '2022-07-01 17:00:01',
                    name: '清污结束',
                }, {
                    nodeTime: '2022-07-01 18:00:01',
                    name: '加油结束',
                }, {
                    nodeTime: '2022-07-01 20:00:01',
                    name: '卸机结束',
                }, {
                    nodeTime: '2022-07-01 21:00:01',
                    name: '起飞',
                }
            ],
            // ULD的时间节点数组
            nodeULD: [
                {
                    name: '分拣箱',
                    ev: 'fenjianUp',
                    time: '2022-07-01 05:00:01'
                }, {
                    name: '转班箱',
                    ev: 'zhuangbanUp',
                    time: '2022-07-01 06:00:01'
                }, {
                    name: '经停箱',
                    ev: 'jingtinUp',
                    time: '2022-07-01 07:00:01'
                }, {
                    name: '空箱',
                    ev: 'kongUp',
                    time: '2022-07-01 08:00:01'
                }, {
                    name: '分拣箱',
                    ev: 'fenjianLow',
                    time: '2022-07-01 15:00:01'
                }, {
                    name: '转班箱',
                    ev: 'zhuangbanLow',
                    time: '2022-07-01 16:00:01'
                }, {
                    name: '经停箱',
                    ev: 'jingtinLow',
                    time: '2022-07-01 17:00:01'
                }, {
                    name: '空箱',
                    ev: 'kongLow',
                    time: '2022-07-01 18:00:01'
                },
            ],
            // ULD的图片数组
            nodeULDImg: [
                { id: 'fenjianUp', img: 'icon-dingwei' },
                { id: 'zhuangbanUp', img: 'icon-huadao' },
                { id: 'jingtinUp', img: 'icon-chedao' },
                { id: 'kongUp', img: 'icon-zhuanbanxiang2' },
                { id: 'fenjianLow', img: 'icon-fenjianxiang2' },
                { id: 'zhuangbanLow', img: 'icon-fenjianxiang' },
                { id: 'jingtinLow', img: 'icon-yingxiang' },
                { id: 'kongLow', img: 'icon-a-shoujizhutizhuti' },
                
            ],
            // ULD最后渲染的数组
            nodeULDArr: [],
            // 甘特图的数据
            gantArr: [
                {
                    id: '1',
                    evName: '升降平台车',
                    startTime: '2022-07-01 01:00:01',
                    endTime: '2022-07-01 05:00:01',
                    evNode: [
                        { evNodeName: '接收任务', evNodeTime: '2022-07-01 01:00:01', },
                        { evNodeName: '到达机位', evNodeTime: '2022-07-01 02:00:01', },
                        { evNodeName: '离开机位', evNodeTime: '2022-07-01 04:00:01', },
                        { evNodeName: '到达VP', evNodeTime: '2022-07-01 04:30:01', },
                    ]
                }, {
                    id: '2',
                    evName: '传送带车',
                    startTime: '2022-07-01 01:00:01',
                    endTime: '2022-07-01 07:00:01',
                    evNode: [
                        { evNodeName: '接收任务', evNodeTime: '2022-07-01 01:00:01', },
                        { evNodeName: '到达机位', evNodeTime: '2022-07-01 02:00:01', },
                        { evNodeName: '离开机位', evNodeTime: '2022-07-01 04:00:01', },
                        { evNodeName: '到达VP', evNodeTime: '2022-07-01 06:30:01', },
                    ]
                }, {
                    id: '3',
                    evName: '登机梯车',
                    startTime: '2022-07-01 02:00:01',
                    endTime: '2022-07-01 04:00:01',
                    evNode: [
                        { evNodeName: '接收任务', evNodeTime: '2022-07-01 02:00:01', },
                        { evNodeName: '到达机位', evNodeTime: '2022-07-01 02:30:01', },
                        { evNodeName: '离开机位', evNodeTime: '2022-07-01 03:00:01', },
                    ]
                }, {
                    id: '4',
                    evName: 'TUG1221',
                    startTime: '2022-07-01 03:00:01',
                    endTime: '2022-07-01 09:00:01',
                    evNode: [
                        { evNodeName: '接收任务', evNodeTime: '2022-07-01 03:00:01', },
                        { evNodeName: '到达机位', evNodeTime: '2022-07-01 03:30:01', },
                        { evNodeName: '装车完成', evNodeTime: '2022-07-01 07:00:01', },
                        { evNodeName: '到达拆板口', evNodeTime: '2022-07-01 08:00:01', },
                    ]
                }, {
                    id: '5',
                    evName: 'TUG1011',
                    startTime: '2022-07-01 03:30:01',
                    endTime: '2022-07-01 09:30:01',
                    evNode: [
                        { evNodeName: '接收任务', evNodeTime: '2022-07-01 03:30:01', },
                        { evNodeName: '到达机位', evNodeTime: '2022-07-01 05:00:01', },
                        { evNodeName: '靠接完成', evNodeTime: '2022-07-01 07:00:01', },
                    ]
                }, {
                    id: '6',
                    evName: '传送带车',
                    startTime: '2022-07-01 05:00:01',
                    endTime: '2022-07-01 10:00:01',
                    evNode: [
                        { evNodeName: '接收任务', evNodeTime: '2022-07-01 05:00:01', },
                        { evNodeName: '到达机位', evNodeTime: '2022-07-01 07:00:01', },
                        { evNodeName: '装车完成', evNodeTime: '2022-07-01 08:00:01', },
                        { evNodeName: '到达拆板口', evNodeTime: '2022-07-01 10:00:01', },
                    ]
                }, {
                    id: '7',
                    evName: '拖车',
                    startTime: '2022-07-01 09:00:01',
                    endTime: '2022-07-01 14:00:01',
                    evNode: [
                        { evNodeName: '接收任务', evNodeTime: '2022-07-01 09:00:01', },
                        { evNodeName: '到达机位', evNodeTime: '2022-07-01 12:00:01', },
                        { evNodeName: '离开机位', evNodeTime: '2022-07-01 14:00:01', },
                    ]
                }, {
                    id: '8',
                    evName: '拖车1',
                    startTime: '2022-07-01 07:00:01',
                    endTime: '2022-07-01 13:00:01',
                    evNode: [
                        { evNodeName: '接收任务', evNodeTime: '2022-07-01 07:00:01', },
                        { evNodeName: '到达机位', evNodeTime: '2022-07-01 12:00:01', },
                        { evNodeName: '离开机位', evNodeTime: '2022-07-01 13:00:01', },
                    ]
                }, {
                    id: '9',
                    evName: '拖车2',
                    startTime: '2022-07-01 12:00:01',
                    endTime: '2022-07-01 17:00:01',
                    evNode: [
                        { evNodeName: '接收任务', evNodeTime: '2022-07-01 12:00:01', },
                        { evNodeName: '到达机位', evNodeTime: '2022-07-01 14:00:01', },
                        { evNodeName: '离开机位', evNodeTime: '2022-07-01 16:00:01', },
                    ]
                }, {
                    id: '10',
                    evName: '拖车3',
                    startTime: '2022-07-01 09:00:01',
                    endTime: '2022-07-01 17:00:01',
                    evNode: [
                        { evNodeName: '接收任务', evNodeTime: '2022-07-01 09:00:01', },
                        { evNodeName: '到达机位', evNodeTime: '2022-07-01 13:00:01', },
                        { evNodeName: '离开机位', evNodeTime: '2022-07-01 15:00:01', },
                        { evNodeName: '到达VP', evNodeTime: '2022-07-01 17:00:01', },
                    ]
                }, {
                    id: '6',
                    evName: '传送带车',
                    startTime: '2022-07-01 05:00:01',
                    endTime: '2022-07-01 10:00:01',
                    evNode: [
                        { evNodeName: '接收任务', evNodeTime: '2022-07-01 05:00:01', },
                        { evNodeName: '到达机位', evNodeTime: '2022-07-01 07:00:01', },
                        { evNodeName: '装车完成', evNodeTime: '2022-07-01 08:00:01', },
                        { evNodeName: '到达拆板口', evNodeTime: '2022-07-01 10:00:01', },
                    ]
                }, {
                    id: '7',
                    evName: '拖车',
                    startTime: '2022-07-01 09:00:01',
                    endTime: '2022-07-01 14:00:01',
                    evNode: [
                        { evNodeName: '接收任务', evNodeTime: '2022-07-01 09:00:01', },
                        { evNodeName: '到达机位', evNodeTime: '2022-07-01 12:00:01', },
                        { evNodeName: '离开机位', evNodeTime: '2022-07-01 14:00:01', },
                    ]
                }, {
                    id: '8',
                    evName: '拖车1',
                    startTime: '2022-07-01 07:00:01',
                    endTime: '2022-07-01 13:00:01',
                    evNode: [
                        { evNodeName: '接收任务', evNodeTime: '2022-07-01 07:00:01', },
                        { evNodeName: '到达机位', evNodeTime: '2022-07-01 12:00:01', },
                        { evNodeName: '离开机位', evNodeTime: '2022-07-01 13:00:01', },
                    ]
                }, {
                    id: '9',
                    evName: '拖车2',
                    startTime: '2022-07-01 12:00:01',
                    endTime: '2022-07-01 17:00:01',
                    evNode: [
                        { evNodeName: '接收任务', evNodeTime: '2022-07-01 12:00:01', },
                        { evNodeName: '到达机位', evNodeTime: '2022-07-01 14:00:01', },
                        { evNodeName: '离开机位', evNodeTime: '2022-07-01 16:00:01', },
                    ]
                }, {
                    id: '10',
                    evName: '拖车3',
                    startTime: '2022-07-01 09:00:01',
                    endTime: '2022-07-01 17:00:01',
                    evNode: [
                        { evNodeName: '接收任务', evNodeTime: '2022-07-01 09:00:01', },
                        { evNodeName: '到达机位', evNodeTime: '2022-07-01 13:00:01', },
                        { evNodeName: '离开机位', evNodeTime: '2022-07-01 15:00:01', },
                        { evNodeName: '到达VP', evNodeTime: '2022-07-01 17:00:01', },
                    ]
                }, {
                    id: '11',
                    evName: '拖车4',
                    startTime: '2022-07-01 14:00:01',
                    endTime: '2022-07-01 19:00:01',
                    evNode: [
                        { evNodeName: '接收任务', evNodeTime: '2022-07-01 14:00:01', },
                        { evNodeName: '到达机位', evNodeTime: '2022-07-01 15:00:01', },
                        { evNodeName: '离开机位', evNodeTime: '2022-07-01 18:00:01', },
                    ]
                }, {
                    id: '8',
                    evName: '拖车1',
                    startTime: '2022-07-01 07:00:01',
                    endTime: '2022-07-01 13:00:01',
                    evNode: [
                        { evNodeName: '接收任务', evNodeTime: '2022-07-01 07:00:01', },
                        { evNodeName: '到达机位', evNodeTime: '2022-07-01 12:00:01', },
                        { evNodeName: '离开机位', evNodeTime: '2022-07-01 13:00:01', },
                    ]
                }, {
                    id: '9',
                    evName: '拖车2',
                    startTime: '2022-07-01 12:00:01',
                    endTime: '2022-07-01 17:00:01',
                    evNode: [
                        { evNodeName: '接收任务', evNodeTime: '2022-07-01 12:00:01', },
                        { evNodeName: '到达机位', evNodeTime: '2022-07-01 14:00:01', },
                        { evNodeName: '离开机位', evNodeTime: '2022-07-01 16:00:01', },
                    ]
                }, {
                    id: '10',
                    evName: '拖车3',
                    startTime: '2022-07-01 09:00:01',
                    endTime: '2022-07-01 17:00:01',
                    evNode: [
                        { evNodeName: '接收任务', evNodeTime: '2022-07-01 09:00:01', },
                        { evNodeName: '到达机位', evNodeTime: '2022-07-01 13:00:01', },
                        { evNodeName: '离开机位', evNodeTime: '2022-07-01 15:00:01', },
                        { evNodeName: '到达VP', evNodeTime: '2022-07-01 17:00:01', },
                    ]
                }, {
                    id: '11',
                    evName: '拖车4',
                    startTime: '2022-07-01 14:00:01',
                    endTime: '2022-07-01 19:00:01',
                    evNode: [
                        { evNodeName: '接收任务', evNodeTime: '2022-07-01 14:00:01', },
                        { evNodeName: '到达机位', evNodeTime: '2022-07-01 15:00:01', },
                        { evNodeName: '离开机位', evNodeTime: '2022-07-01 18:00:01', },
                    ]
                }, {
                    id: '12',
                    evName: '拖车5',
                    startTime: '2022-07-01 15:00:01',
                    endTime: '2022-07-01 22:00:01',
                    evNode: [
                        { evNodeName: '接收', evNodeTime: '2022-07-01 15:00:01', },
                        { evNodeName: '到达', evNodeTime: '2022-07-01 20:00:01', },
                        { evNodeName: '离开', evNodeTime: '2022-07-01 22:00:01', },
                    ]
                },
            ],
            // 时差计算
            calc: false,
            brr: [],
            intervalArr: [],
        };
    },
    //计算属性 类似于 data 概念
    computed: {
 
    },
    //监控 data 中的数据变化
    watch: {
        intervalArr:{
            handler(){
                this.brr = []
                for(let i in this.intervalArr){
                    if(i>0){
                        let item = this.conversion.ssss(this.intervalArr[i].evNodeTime)
                        let items = this.conversion.ssss(this.intervalArr[i-1].evNodeTime)
                        this.brr.push(this.conversion.formatSeconds(Math.abs(item-items)))
                    }
                }
                this.brr.push('请选择事件节点')
                if(this.intervalArr.length >= 2){
                    this.calc = true
                }
            }
            
        }
    },
    //方法集合
    methods: {
        // 时间转换方法this.conversion.ssss()请自己写


        // 鼠标移动时跟随的线
        mousemove(e) {
            let rect = e.currentTarget.getBoundingClientRect();//这样写是为了处理点击事件鼠标能够点到线下面的东西
            this.mouseX = e.clientX - rect.left;
            this.mouseY = e.clientY - rect.left;
        },

        // 鼠标线的位置时间
        pointerTime() {
            return this.conversion.YMDhms((this.endTime - this.startTime) * (this.mouseX / this.isWidth) + this.startTime)
        },

        // 甘特图方法---------------------------------------------------------------------------------------------------------
        // 计算甘特图的每一项的文字位置
        calctxt(i,item) {
            let t = this.conversion.ssss(i.evNodeTime)
            let j = this.conversion.ssss(item.startTime)
            let k = this.conversion.ssss(item.endTime)
            return { left: ((t - j) / (k - j) * 100).toFixed(3) + '%' }
        },
        // 计算甘特图的每一项偏移位置和宽度
        calcdeviation(item) {
            let t = this.conversion.ssss(item.startTime)
            let j = this.conversion.ssss(item.startTime)
            let k = this.conversion.ssss(item.endTime)
            return {
                left: ((t - this.startTime) / (this.endTime - this.startTime) * 100).toFixed(3) + '%',
                width: ((k - j) / (this.endTime - this.startTime) * 100).toFixed(3) + '%'
                }
        },
        // 计算甘特图盒子的渐变背景宽
        calcbgWidth(item) {
            let j = this.conversion.ssss(item.startTime)
            let k = this.conversion.ssss(item.endTime)
            let w = Number(((this.currentTime - j) / (k - j) * 100).toFixed(3))
            
            if(w <= 0){
                return { width:0 + '%'}
            }else if(w >= 100){
                return { width:100 + '%'}
            }else{
                return { width:w + '%'}
            }
            // return { width: ((this.currentTime - j) / (k - j) * 100).toFixed(3) > 100 ? 100 : ((this.currentTime - j) / (k - j) * 100).toFixed(3)  + '%' }
        },

        
        // 事件节点方法---------------------------------------------------------------------------------------------------------
        // 计算事件节点盒子的渐变背景宽
        calcWidth() {
            return { width: ((this.currentTime - this.startTime) / (this.endTime - this.startTime) * 100).toFixed(3) + '%' }
        },
        // 计算事件节点盒子的偏移位置
        calcLeft(item) {
            let t = this.conversion.ssss(item.nodeTime || item.time)
            return { left: ((t - this.startTime) / (this.endTime - this.startTime) * 100).toFixed(3) + '%' }
        },

        // 打印节点事件
        nodeEventClick(item) {
            console.log(item.name);
        },

        // 甘特图子节点点击
        submitNode(item,i){
            console.log('甘特图节点',item,i);
            
            this.intervalArr.push({
                evName: item.evName,
                evNodeName: i.evNodeName,
                evNodeTime: i.evNodeTime,
            })
            setTimeout(()=>{
                this.$refs.elem.scrollTop = this.$refs.elem.scrollHeight;
            },10)
            
        },

        // ULD的图片
        getULD() {
            this.nodeULDArr = this.nodeULD.map((item) => {
                let icons = this.nodeULDImg.find((x) => x.id === item.ev).img;
                return Object.assign(item, { icons: icons });
            });
        },

        // 当前时间   我的时间是通过时间轴传过来的，请自行使用定时器模拟
        // runTime() {
        //     this.itmes = setInterval(() => {
        //         if (this.currentTime > 1656691199) {
        //             this.currentTime = 1656604800
        //         } else {
        //             this.currentTime+=100
        //         }
        //     }, 100);
        // },

        // 获取整个盒子的宽度
        screenWidth() {
            this.isWidth = this.$refs.relationBox.offsetWidth;
        },

        // 关闭计算机
        closePage(){
            this.calc = false
            this.intervalArr = []
            this.brr = []
        }
    },
    //生命周期 - 创建完成（可以访问当前 this 实例） 
    created() {
        // this.runTime()
        // 添加事件监听器
        window.addEventListener("resize", this.screenWidth);
    },
    //生命周期 - 挂载完成（可以访问 DOM 元素） 
    mounted() {
        // 获取整个盒子的宽度
        this.screenWidth()
        this.getULD()
        // this.getCurrentTime()
        // this.isWidth = this.$refs.relationBox.offsetWidth
        this.viewer.addResponseEventListener("Web", (data) => {
            alert(JSON.stringify(data))
            this.upDateByTime = data.data.upDateByTime
        });
        // this.viewer.addResponseEventListener("Web1", (data) => {
        //     alert('ue的数据WEB1')
        //     this.uePlanOrPause = 'timePlan'
        // });
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() {
        // 删除事件监听器
        window.removeEventListener("resize", this.screenWidth);
    }, //生命周期 - 销毁完成
    activated() { }, //如果页面有 keep-alive 缓存功能， 这个函数会触发
}
</script>
<style scoped lang="less">
.relation {
    width: 100%;
    height: 935px;
    // background: pink;
    position: relative;
    user-select: none;
    transition: height 2s;
}
// .relation_screen{
//     height: 800px;
//     transition: height 2s;
// }
.line {
    height: 935px;
    border-left: 1px solid #fff;
    position: absolute;
    pointer-events: none;
}

.node_box {
    width: 100%;
    height: 100px;
    // background: greenyellow;
    position: absolute;
    bottom: 0px;

    .gradientbg {
        position: absolute;
        height: 30px;
        // width: 500px;
        // background: -webkit-linear-gradient(left, rgb(128, 245, 163), red);
        background: linear-gradient(90deg, #49A043 0%, #2B6551 100%);
        
    }
    .gradientbg::before{
        content: "》";
        position: absolute;
        line-height: 30px;
        right: 5px;
    }
    .item {
        height: 30px;
        border: 1px solid #fff;
        font-size: 12px;
        position: absolute;
        max-width: 100px;
        padding: 5px;
        // background: white;
        background: linear-gradient(90deg, #49A043 0%, #2B6551 100%);
    }

    .ULDbox {
        position: absolute;
        top: 50px;
    }

}

.gant_box {
    width: 100%;
    height: 800px;    
    // background: url(../../assets/postyan.jpg) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    // top: 20px;
    transition: height 2s;
    overflow: hidden;
    transform:rotateX(180deg);//反转div让元素从下往上显示
    .gant_item {
        min-height: 0;
        position: relative;
        // border: 1px solid red;
        margin: 17px 0;
        height: 20px;
        transform:rotateX(180deg);//反转div后文字也是反的，再把文字反转回去
        background: #A0A0A0;
        .txtLeft{
            position: absolute;
            left: -80px;
        }
        .txt{
            position: absolute;
            white-space: nowrap;
            // height: 20px;
            // padding: 1px 4px;
            font-size: 12px;
            background: #545760;
            border: 1px solid #fff;
            
        }
        .speedbg{
            position: absolute;
            height: 20px;
            // width: 50px;
            // background: -webkit-linear-gradient(left, rgb(128, 245, 163), red);
            background: linear-gradient(90deg, #389AB0 0%, #177592 100%);
        }
    }
}
// .gant_box_screen{
//     height: 650px;
//     transition: height 2s;
// }


.search{
    position: absolute;
    width: 80px;
    height: 30px;
    border: 1px solid black;
    background: red;
}

.interval{
    width:220px ;
    height: 515px;
    padding: 10px 5px;
    // margin: 0 auto;
    // text-align: center;
    // border-top:100px solid transparent;
    // border-bottom:60px solid yellow;
    // border-left:30px solid transparent;
    // border-right:30px solid transparent;
    // transform:rotateX(180deg);
    
    .subject{
        // display: flex;
        // transform:rotateX(180deg);
        width: 210px;
        height: 445px;
        color: #fff;
        padding: 20px 0;
        margin: 5px;
        overflow-y: auto;
        // background-image: url();
        .flex_box{
            align-items: center;
            display: flex;
            justify-content: center;

            .selected{
                width: 145px;
                height: 45px;
                margin-left: 10px;
                background: rgba(160, 160, 160, .4);
            }
        }
        .difference{
            height: 60px;
            .icon-shichajisuan-jiantou{
                font-size: 30px;
            }
        }
    }
}
</style>
weixin_45191316
关注
专栏目录
Vue 甘特图
ChickenBro_的博客
10-12 2万+
vue做甘特图，先大致介绍下核心功能： （1）横轴、纵轴拖拽； （2）自定义监听点击事件（双击、右键等）（3）任务之间显示父子层级关系；（4）左侧列表信息，右侧时间轴表示任务；（5）每个任务可以订制样式，并且可以动态修改样式；（6）自定义时间粒度显示（小时、天、星期、月、年）；（7）支持大批量数据渲染；（8）支持同行多节点渲染；（9）支持选中，以及批量选中；（9）优秀的扩展性，支持第三方插件。等等还有其他的一些功能。这里先看一下效果图： 　　接下来会介绍用什么实现的，...
vue 改变domclass_基于 vue 开发甘特图组件的心路历程（兼设计分享）
weixin_39631572的博客
10-22 640
语雀原文 有更好的排版体验~这篇文章主要讲述笔者开发 v-gantt 甘特图组件的经过。起源公司项目有个甘特图的需求。笔者考察了世面上 常见的甘特图组件 后，本着 我上我也行 的心态，以及考虑之前拓展其他开源组件时的痛苦体验，决定自研。一番设计后，就开始动工了。设计布局拆解首先对目标界面进行拆解。可以看到甘特图组件是由 左侧可折叠的树 & 右侧条状图 两部分组成的。滚动方面， 头部日期 h...
vue-project-timeline：Vue.js中类似于甘特图的项目时间线
02-05
Vue.js项目时间表 Vue.js的类似于甘特图的项目时间表。 安装 npm install @mvsde/vue-project-timeline 基本用法 < template> < project xss=removed xss=removed xss=removed> </ template> < script > import ProjectTimeline from ' @mvsde/vue-project-timeline '
gantt-schedule-timeline-calendar:甘特甘特甘特时间线时间表日历[javascript甘特，js甘特，项目甘特，时间线，调度器，甘特时间线，预订时间线，react甘特，角度甘特，vue甘特，svelte甘特，预订经理]
05-11
甘特时间表时间表日历 甘特图，时间表，时间轴和日历组件合而为一！ gantt-schedule-timeline-calendar是可以在不同场景中使用的多合一组件。 关键字：[甘特图，javascript甘特图，打字稿甘特图，项目经理，js甘特图，js计划程序，js时间轴，javascript时间线，javascript计划，js计划程序，javascript日历] 永远记住，留下一颗 :star: 特征 弹性-您几乎可以将所有内容从DOM树更改为逻辑（无需任何编译，无需修改原始代码-使用配置，状态或插件） 超级快！ 即使是大型数据集 一行中有多个项目-适用于各种应用程序，例如预订，预订，资源管理器，多媒体编辑器等。 树状结构-可折叠/可展开的组 可移动/可调整大小的项目，能够配置当前哪些项目可以移动以及如何移动 安全的html模板 调整大小/移动时捕捉到指定时间 模板和插槽支持轻松更改每
vue前端实现 dhtmlxgantt 甘特图（个人需求，不完全）
qq_45246017的博客
07-27 476
开发过程中需要判断节假日并置灰显示，使用了插件npm i chinese-days实现。// 清除现有数据（可选）// 甘特图每次更新数据时要先清空下之前的数据。安装：npm i dhtmlx-gantt。
vue2实现可拖拽甘特图（结合element-ui的gantt图）
11-07
接到公司需求，要做一个可拖拽的甘特图来实现排期需求，官方的插件要付费还没有中文的官方文档可以看，就去找了各种开源的demo来看，功能上都不是很齐全，于是总结了很多demo，合在一起组成了一版较为完整的满足需求的甘特图。 1.拖拽 拖拽功能是甘特图的主要功能，该demo实现了甘特图时间块上、下、左、右拖拽功能。 2.排序 拖拽后时间块进行排序，计算重叠区域大小确定插入位置。 3.时间选择 结合element-ui的日期时间选择器来确定时间轴。 4.搜索 搜索已存在的时间块，并定位到相应位置。 5.新建排期任务 使用element-ui的弹框以及表单 新建成功的排期列表添加到排期任务中。 6.右键菜单 右击时间块，可以进行查看、删除、修改等操作。 7.撤回 每删除或移动时间块后，增加一条操作记录，点击撤回可撤回当前操作。 8.批量操作 在批量操作后点击保存，才向后端存储数据。
vue-gantt-schedule-timeline-calendar-example:Vue Gantt时间表时间轴日历用法示例
05-11
Vue 用法示例 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
Vue 项目引入 GSTC 报错, gantt-schedule-timeline-calendar,甘特图
又是再见?
04-19 4942
​ 背景: 项目中用到甘特图, 找到了 gantt-schedule-timeline-calendar 可以满足项目需求; 项目前端原本使用 vue 2.x, 使用vue-cli3 初始化项目; 使用步骤: 安装依赖 npm i gantt-schedule-timeline-calendar Demo代码: // xxx.vue <template> <gstc /> </template> <script> import G
会议/台架 预约 Vue-scheduler-gannt 调度器
放弃不难，但坚持一定很酷！
10-21 633
【代码】会议/台架 预约 Vue-scheduler-gannt 调度器。
vue实现甘特图
好记性不如烂笔头
01-25 1892
上述示例完整代码在 vue-gantt-schedule-timeline-calendar依赖中提供。注意：gantt-schedule-timeline-calendar需授权才可使用。上图是运行效果，在控制台会有两条license请求，可以看到请求发出的文件位置。1、替换license验证地址，换成我们自己的请求，保证响应成功。上图是我版本的代码，由于代码被编译了，每个版本有所出入。图中标注的u即请求url地址，换成我们自己的即可。上述两种方案，我最终采用的第2种。2、将验证失败的动作去掉。
wl-gantt：一个简单易用且高度可配置的甘特图进度计划项目管理插件
qq_15390381的博客
11-26 9380
wl-gantt 简介 目前市面上最有名的几个gantt插件占据江湖了非常久远的时间，它们古老又强大。 但无一例外的是：它们收费或极其难用并且依赖非常古老的技术，其中有些技术现在入行的新手甚至从未听闻。 【jQueryGantt】【plusgantt】【dhtmlx】 不可否认它们都非常的强大，不管是从性能还是功能性。但是大多的业务需求并不需要如此庞然大物才能满足需求。 另一方面古老的技术稀缺的文...
时间轴和甘特图的完美结合
08-06
可拖动时间轴和甘特图数据的完美结合，以及菜单的完美展示
基于Vue实现的ganttlike图表用于排班展示
08-09
基于 Vue 实现的 gantt-like 图表 ,用于排班展示
react-gantt-schedule-timeline-calendar:React Gantt ScheduleTimeline Calendar组件包装，用于Gantt-schedule-timeline-calendar [react gantt，gantt，react甘特图，react Schedule，React时间线，React日历，gantt，日程表，Scheduler，时间线，日历，React gantt图表]
03-10
该React包装器组件现在已被放弃，因为它不需要与gstc一起使用。 要在react环境中使用gantt-schedule-timeline-calendar，请看。
angular-gantt-schedule-timeline-calendar:gantt-schedule-timeline-calendar的角度版本[角度甘特图，甘特图，角度甘特图，角度时间表，角度时间线，角度日历，甘特图，时间表，计划程序，时间轴，日历]
03-10
现在不再使用该角度包装器组件，因为它不需要与gstc一起使用。 要在角度环境中使用gantt-schedule-timeline-calendar，请看。
Echart3多图联动，一个时间轴控制多个图
04-11
Echart3多图联动，一个时间轴控制多个图，希望能够帮到大家!
推荐几款好用的开源甘特图，附示例代码
最新发布
松间沙路的博客
08-16 1199
甘特图在车间调度中发挥重要的作用。通过甘特图可以清晰地展示出每个任务的开始时间、结束时间、持续时间和进度情况等信息，同时也可以直观地反映出车间的繁忙程度和资源利用情况。本文将介绍几款功能强大、基于JavaScript的甘特图插件。
vue 中使用 exceljs 生成省市区关联表格
weixin_40414540的博客
07-11 988
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
国内常见的14款低代码平台介绍
热门推荐
IT技术分享社区
10-11 6万+
今天给大家分享国内常见的14款低代码平台，欢迎收藏！
vue甘特图'dhtmlx-gantt'
08-19
对不起，我之前提到的是一个基于Vue.js开发的通用甘特图组件，而非特定的库或插件。但是，如果你想在Vue.js中使用甘特图，你可以考虑使用dhtmlx-gantt库。 dhtmlx-gantt是一个功能强大的JavaScript甘特图库，它提供了丰富的功能和可定制选项。它可以与Vue.js框架很好地集成，让你可以在Vue.js项目中轻松地创建和管理甘特图。 要在Vue.js中使用dhtmlx-gantt，你需要先安装该库，并在你的Vue组件中引入和初始化甘特图。你可以使用npm或yarn等包管理工具安装dhtmlx-gantt，并在你的Vue组件中引入它。然后，你可以根据需要配置和定制甘特图的外观和行为。 以下是一个简单的示例代码，演示了如何在Vue.js中使用dhtmlx-gantt： ```vue <template> <div id="gantt-chart"></div> </template> <script> import "dhtmlx-gantt"; import "dhtmlx-gantt/codebase/dhtmlxgantt.css"; export default { mounted() { const tasks = [ { id: 1, text: "Task 1", start_date: "2022-01-01", duration: 5 }, { id: 2, text: "Task 2", start_date: "2022-01-06", duration: 3 }, // more tasks... ]; gantt.init("gantt-chart"); gantt.parse({ data: tasks }); } }; </script> <style> #gantt-chart { width: 100%; height: 500px; } </style> ``` 上面的代码演示了在Vue组件的mounted钩子函数中初始化和渲染甘特图。你可以根据自己的需求修改任务数据、甘特图容器的样式以及其他配置选项。 总的来说，dhtmlx-gantt是一个强大且易于使用的甘特图库，适用于在Vue.js项目中展示和管理甘特图。你可以根据该库的文档和示例进行进一步的学习和定制。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值