gunter-kgd 1.0.0 → 1.0.2

package/components/gante_test/gante-drag-circle.vue

@@ -0,0 +1,151 @@
+<template>
+    <div class="task-drag-circle"
+         :class="{active: dragInfo.mouseDown && dragInfo.taskId == current_data.gunter_id}"
+         ref="drag_circle"
+         :style="{transform: `translate3d(${left+'px'},-2px,0)`,opacity: current_data.is_hover ? 1 : 0}"
+         @mousedown="dragDown"
+         @mouseup="doc_up"
+         @mouseleave="out_op"
+         @mouseenter="enter">
+        <span></span>
+    </div>
+</template>
+
+<script>
+    import { mapState,mapMutations } from 'vuex';
+    import autoScroll from './auto-scroll';
+    import commitEmit from './commit.js';
+    export default {
+        name: "gante-drag-circle",
+        mixins:[autoScroll],
+        props:{
+            current_data: Object,
+        },
+        computed:{
+            ...mapState([
+               'dragInfo',
+                'currentInfo'
+            ]),
+            left(){
+                let _left = this.current_data.left ? this.current_data.left : 0,
+                    _width = this.current_data.width ? this.current_data.width : 0;
+                return _left + _width + 20
+            }
+        },
+        data(){
+            return{
+
+            }
+        },
+        methods:{
+            ...mapMutations([
+                'SET_DASHLINE',
+                'SET_DRAG_INFO',
+                'SET_CURRENT_INFO'
+            ]),
+            // 按下拖动的圆点
+            dragDown(e){
+                if(this.current_data){
+                    let _ganteview = document.getElementsByClassName('ganteview')[0],
+                        c_x = Number(this.current_data.left) + Number(this.current_data.width) + 22,
+                        c_y = e.target.getBoundingClientRect().top - _ganteview.getBoundingClientRect().top + 4,
+                        scrollLeft = _ganteview.scrollLeft,
+                        scrollTop = _ganteview.scrollTop
+
+                    this.SET_DRAG_INFO({
+                        data:{
+                            mouseDown: true,
+                            taskId: this.current_data.gunter_id,
+                            right: Number(this.current_data.left) + Number(this.current_data.width),
+                            offsetTop: this.$refs.drag_circle ? this.$refs.drag_circle.getBoundingClientRect().top : 0,
+                            startData: {x: scrollLeft >0 ? e.target.getBoundingClientRect().left + scrollLeft : e.target.getBoundingClientRect().left,y: scrollTop > 0 ? e.target.getBoundingClientRect().top+ scrollTop : e.target.getBoundingClientRect().top}
+                        },
+                        mode: 2
+                    })
+                    this.SET_DASHLINE({
+                        data:{
+                            showLine: true,
+                            left: c_x ,
+                            top: c_y,
+                            width: 0
+                        },
+                        mode: 2
+                    });
+                    document.addEventListener('mousemove',this.doc_move,{passive:false})
+                    document.addEventListener('mouseup',this.doc_up,{passive:false});
+                    e.preventDefault();
+                }
+            },
+            doc_move(e){
+                if(this.dragInfo.mouseDown){
+                    let _ganteview = document.getElementsByClassName('ganteview')[0];
+                    let _currentX = (e.clientX + _ganteview.scrollLeft)  - this.dragInfo.startData.x ,_currentY = (e.clientY + _ganteview.scrollTop)  - this.dragInfo.startData.y;
+                    this.SET_DASHLINE({
+                        data:{
+                            width: Math.sqrt(Math.pow(Math.abs(_currentX),2)+Math.pow(Math.abs(_currentY),2)),
+                            scale: Math.atan2((_currentY),_currentX)/0.017453292
+                        },
+                        mode: 2
+                    });
+                    this.autoScroll(e,_ganteview);
+                }
+            },
+            doc_up(e){
+                if(this.dragInfo.mouseDown){
+                    if(this.currentInfo.taskId && this.currentInfo.before_id){
+                        commitEmit.$emit('onBeforeDataChange',this.currentInfo.taskId, this.currentInfo.before_id,2)
+                    }
+                    this.SET_DRAG_INFO({
+                        data:{},
+                        mode: 1
+                    })
+                    this.SET_DASHLINE({
+                        data:{},
+                        mode: 1
+                    });
+                    this.SET_CURRENT_INFO({})
+                    document.removeEventListener('mousemove',this.doc_move,false)
+                    document.removeEventListener('mouseup',this.doc_up,false);
+                    clearInterval(this.scrollFn);
+                }
+            },
+            // 拖动时进入到当前元素上
+            enter(e){
+                if(!this.dragInfo.mouseDown) return;
+                if(!this.dragInfo.startData) return;
+                if(this.dragInfo.taskId == this.current_data.gunter_id) return;
+                this.SET_CURRENT_INFO({ taskId: this.current_data.gunter_id,before_id: this.dragInfo.taskId})
+            },
+            out_op(){
+                this.SET_CURRENT_INFO({})
+            }
+        }
+    }
+</script>
+
+<style scoped lang="less">
+    /*右边拖动的圆点*/
+    .task-drag-circle {
+        width: 10px;
+        height: 10px;
+        cursor: pointer;
+        position: relative;
+        transition: opacity .2s ease;
+        span{
+            position: absolute;
+            width: 6px;
+            height: 6px;
+            border-radius: 3px;
+            background: #7eabe8;
+            transition: transform .1s ease;
+        }
+        &:hover span{
+            transform: scale(1.3);
+            background:#3396fb;
+        }
+        &.active{
+            opacity: 1!important;
+
+        }
+    }
+</style>

package/components/gante_test/gante-gc-item-content.vue

@@ -0,0 +1,442 @@
+<!--图表每个条块-->
+<template>
+    <div
+        @mousemove.passive="showToast"
+        @mouseleave="hideToast"
+        @mousedown="dragDown($event,'drag')"
+        :style="{
+                    cursor: DragObject.mouseDown ? 'grabbing' : 'grab',
+                    width:current_data.width?current_data.width+'px':0,
+                    transform: `translate3d(${current_data.left?current_data.left+'px':0},10px,0)`,
+                    transition: !DragObject.mouseDown ? 'width .5s linear, opacity .2s ease' : 'null',
+                    background:current_data.bg_color?current_data.bg_color:'#FD8A25',
+                    borderColor: current_data.bg_color ? `${current_data.bg_color} ${current_data.bg_color} transparent`: '#00b0ff #00b0ff transparent'}"
+        class="ganteview-item" :class="{'has-child': current_data.children}">
+      <span class="ganteview-item__label">{{`${myPublic.dateFormat.format(this.current_data.params.startTime,'YYYY-MM-DD')} ~ ${myPublic.dateFormat.format(this.current_data.params.endTime,'YYYY-MM-DD')}`}}</span>
+        <span v-show="current_data.show_drag" @mousedown.stop="dragDown($event,'left')"  data-drag="true" class="left-drag-line"></span>
+        <span v-show="current_data.show_drag" @mousedown.stop="dragDown($event,'right')" data-drag="true" class="right-drag-line"></span>
+        <div  v-show="current_data.show_drag" data-drag="true" class="ganter_drag_hover"></div>
+    </div>
+</template>
+
+<script>
+    import myPublic from '../../utils/public';
+    import emitter from './commit'
+    export default {
+        name: "gante-gc-item-content",
+        data(){
+            return{
+                myPublic,
+                requestId: '',
+                canShow: false,// 是否可以显示toast ,为了防止触发了mouseout事件后立马触发showToast事件
+                toastClassResolved: '',
+                DragObject:{
+                    startX: 0, // 开始的位置
+                    mouseDown: false,// 是否按下了鼠标
+                    scale: 0, // 刻度
+                    mode: 1, // 默认以小时为单位 1:小时 2 ：天
+                    start_width: 0,// 记录开始的宽度
+                    start_left: 0,// 记录开始的宽度
+                    start_time: null, // 记录开始拖动时的时间
+                    end_time:null,  // 记录开始拖动时的时间
+                    startAttr: null,// 开始时间的属性名
+                    endAttr: null,// 结束时间的属性名
+                    move_type: null, // 拖动的方式 left: 拖动左边时间 right: 拖动右边时间  drag： 拖动整体
+                }
+            }
+        },
+        props:{
+            current_data: Object,
+            th_data: Object,
+            time_1px:Number, // 1px代表的时间
+            time_mode:[Number,String],
+            start_time: {}, //开始时间
+            end_time: {},
+            toastRender: Function,
+            toastClass: String,
+        },
+        methods:{
+            buildToastContent() {
+                if (!this.current_data || !this.current_data.params) {
+                    this.toastClassResolved = (this.toastClass || '').trim();
+                    return '';
+                }
+                let list = '';
+                for (let i in this.th_data) {
+                    if (this.current_data.params[i] != undefined && (this.th_data[i].showToast || this.th_data[i].time_mode == 1 || this.th_data[i].time_mode == 2)) {
+                        list += `<p>${this.th_data[i].value}：${this.current_data.params[i]}</p>`;
+                    }
+                }
+
+                const defaultContent = list;
+
+                let resolvedContent = defaultContent;
+                let resolvedClass = (this.toastClass || '').trim();
+                if (typeof this.toastRender === 'function') {
+                    const custom = this.toastRender({
+                        currentData: this.current_data,
+                        thData: this.th_data,
+                        defaultContent
+                    });
+                    if (typeof custom === 'string') {
+                        resolvedContent = custom;
+                    } else if (custom && typeof custom === 'object') {
+                        if (custom.content !== undefined) {
+                            resolvedContent = custom.content;
+                        }
+                        if (custom.className) {
+                            resolvedClass = `${resolvedClass ? resolvedClass + ' ' : ''}${custom.className}`.trim();
+                        }
+                    }
+                }
+
+                this.toastClassResolved = resolvedClass;
+                return resolvedContent;
+            },
+            showToast(e) {
+                this.canShow = true;
+                let animation = () => {
+                    this.setMouseMode()
+                    let  x = e.clientX + 15, y = e.clientY + 15
+                    if(this.current_data && this.canShow){
+                        if(this.current_data.params){
+                            let toast = document.createElement('div'), add_toast = true
+                            const content = this.buildToastContent();
+                            const toastClass = `gante-toast-liu${this.toastClassResolved ? ' ' + this.toastClassResolved : ''}`
+                            toast.setAttribute('class', toastClass)
+                            if (document.getElementsByClassName('gante-toast-liu')[0]) {
+                                toast = document.getElementsByClassName('gante-toast-liu')[0];
+                                toast.setAttribute('class', toastClass)
+                                toast.style.display = 'block';
+                                add_toast = false;
+                            }
+                            if(toast.innerHTML != content || content == ''){
+                                toast.innerHTML = content
+                            }
+                            //判断是否到了页面底部
+                            if (toast.clientHeight + y > window.innerHeight) {
+                                //鼠标的位置在toast的中间
+                                if (e.clientY >= window.innerHeight - toast.clientHeight) {
+                                    y = e.clientY - 10 - toast.clientHeight
+                                } else {
+                                    y = window.innerHeight - toast.clientHeight
+                                }
+                            }
+                            if (toast.clientWidth + x > window.innerWidth) {
+                                x = window.innerWidth - toast.clientWidth
+                            }
+                            toast.style.left = x + 'px'
+                            toast.style.top = y + 'px'
+                            if (add_toast) {
+                                document.getElementsByTagName('body')[0].appendChild(toast)
+                            }
+                        }
+                    }
+                }
+                this.requestId = requestAnimationFrame(animation)
+            },
+            // 设置鼠标样式
+            setMouseMode(){
+                if(!this.canShow){
+                    return;
+                }
+                this.$set(this.current_data,'show_drag',true)
+            },
+            // 隐藏toast
+            hideToast() {
+                // 如果在拖动的情况下就不隐藏
+                if(this.DragObject.mouseDown){
+                    return;
+                }
+                this.canShow = false;
+                this.$set(this.current_data,'show_drag',false)
+                cancelAnimationFrame(this.requestId)
+                if (document.getElementsByClassName('gante-toast-liu') && document.getElementsByClassName('gante-toast-liu').length > 0) {
+                    document.getElementsByClassName('gante-toast-liu')[0].style.display = 'none';
+                }
+            },
+            // 点击了准备拖动
+            dragDown(e,type){
+                if(this.current_data){
+                    if(this.current_data.params){
+                        this.DragObject.mouseDown = true;
+                        this.DragObject.startX = e.clientX;
+                        this.DragObject.move_type = type;
+                        this.DragObject.start_width = this.current_data.width;
+                        this.DragObject.start_left = this.current_data.left;
+                        for (let i in this.th_data) {
+                            if (this.current_data.params[i] != undefined) {
+                                if(this.th_data[i].time_mode == 1){
+                                    this.DragObject.startAttr = i;
+                                    this.DragObject.start_time = this.current_data.params[i]
+                                }
+                                if(this.th_data[i].time_mode == 2){
+                                    this.DragObject.endAttr = i;
+                                    this.DragObject.end_time = this.current_data.params[i]
+                                }
+                            }
+                        }
+                        if(this.time_mode == 1 || this.time_mode == 2){
+                            this.DragObject.scale = 1000*60*60/this.time_1px; // 以小时为单位
+                            this.DragObject.mode = 1;
+                        }else{
+                            this.DragObject.scale = 1000*60*60*24/this.time_1px // 以天为单位
+                            this.DragObject.mode = 2;
+                        }
+                        document.body.classList.add('unselecttable');
+                        if(type == 'drag'){
+                            document.body.style.cursor = 'grabbing';
+                        }else {
+                            document.body.style.cursor = 'e-resize';
+                        }
+
+                        document.addEventListener('mousemove',this.doc_move,{passive:false})
+                        document.addEventListener('mouseup',this.doc_up,{passive:false})
+                    }
+                }
+            },
+            // 拖动时间
+            doc_move(e){
+                if(this.DragObject.mouseDown){
+                    this.hideToast();
+                    let move_mode_width = 0, // 宽度基值
+                        move_mode_left = 0; // left基值
+                    if(this.DragObject.move_type == 'left'){
+                        document.body.style.cursor = 'e-resize';
+                        if(e.clientX > this.DragObject.startX){
+                            move_mode_width = -1;
+                            move_mode_left = 1
+                        }else if(e.clientX < this.DragObject.startX){
+                            move_mode_width = 1;
+                            move_mode_left = -1
+                        }
+                    }else if(this.DragObject.move_type == 'right'){
+                        document.body.style.cursor = 'e-resize';
+                        if(e.clientX > this.DragObject.startX){
+                            move_mode_width = 1;
+                        }else if(e.clientX < this.DragObject.startX){
+                            move_mode_width = -1;
+                        }
+                    }else if(this.DragObject.move_type == 'drag'){
+                        document.body.style.cursor = 'grabbing';
+                        if(e.clientX > this.DragObject.startX){
+                            move_mode_left = 1
+                            move_mode_width = 1
+                        }else if(e.clientX < this.DragObject.startX){
+                            move_mode_left = -1
+                            move_mode_width = -1
+                        }
+                    }
+                    let moveX = Math.abs(e.clientX - this.DragObject.startX), // 移动的距离
+                        move_unit = move_mode_width * (Math.ceil(moveX/this.DragObject.scale)), // 移动的时间
+                        time_mode = 60*60*1000 // 时间类型
+                    let start_time = this.DragObject.start_time,
+                        end_time = this.DragObject.end_time
+
+                    if(this.DragObject.mode == 2){
+                        time_mode = 60*60*1000*24
+                    }
+                    if(this.DragObject.move_type == 'left'){
+                        start_time = myPublic.dateFormat.format((new Date(myPublic.dateFormat.dateReplace(start_time)).getTime() - move_unit*time_mode),'YYYY-MM-DD HH:mm')
+                    }else if(this.DragObject.move_type == 'right'){
+                        end_time = myPublic.dateFormat.format((new Date(myPublic.dateFormat.dateReplace(end_time)).getTime() + move_unit*time_mode),'YYYY-MM-DD HH:mm')
+                    }else{
+                        console.log(start_time)
+                        start_time = myPublic.dateFormat.format((new Date(myPublic.dateFormat.dateReplace(start_time)).getTime() + move_unit*time_mode),'YYYY-MM-DD HH:mm')
+                        end_time = myPublic.dateFormat.format((new Date(myPublic.dateFormat.dateReplace(end_time)).getTime() + move_unit*time_mode),'YYYY-MM-DD HH:mm')
+                    }
+                    let move_width = this.DragObject.start_width + (moveX * move_mode_width), // 当前item的宽度
+                        move_left = this.DragObject.start_left + (moveX * move_mode_left); // 当前item的left
+                    //整体拖动时宽度是不变的
+                    if(this.DragObject.move_type == 'drag'){
+                        move_width = this.DragObject.start_width
+                    }
+                    // 设置最小宽度为10
+                    if(move_width <= 10 && this.DragObject.move_type != 'drag'){
+                        move_width = 10;
+                        move_left = this.DragObject.start_left + ((this.DragObject.start_width - 10) * move_mode_left);
+                        if(this.DragObject.move_type == 'left'){
+                            start_time = myPublic.dateFormat.format((new Date(myPublic.dateFormat.dateReplace(end_time)).getTime() - (time_mode*(Math.ceil(10/this.DragObject.scale)))),'YYYY-MM-DD HH:mm')
+                        }else if(this.DragObject.move_type == 'right'){
+                            end_time = myPublic.dateFormat.format((new Date(myPublic.dateFormat.dateReplace(start_time)).getTime() + (time_mode*(Math.ceil(10/this.DragObject.scale)))),'YYYY-MM-DD HH:mm')
+                        }
+                    }
+                    // 为了实时触发视图更新
+                    delete(this.current_data.width);
+                    delete(this.current_data.left);
+                    this.$set(this.current_data,'width',move_width);
+                    this.$set(this.current_data,'left',move_left);
+                    this.$set(this.current_data.params,this.DragObject.startAttr,start_time);
+                    this.$set(this.current_data.params,this.DragObject.endAttr,end_time);
+                    this.$set(this.current_data,'start_time',new Date(myPublic.dateFormat.dateReplace(start_time)).getTime());
+                    this.$set(this.current_data,'end_time',new Date(myPublic.dateFormat.dateReplace(end_time)).getTime());
+                    // 触发toast时间更新
+                    let toast = null;
+                    if (document.getElementsByClassName('gante-toast-liu')[0]) {
+                        toast = document.getElementsByClassName('gante-toast-liu')[0]
+                        toast.style.display = 'block';
+                        const content = this.buildToastContent();
+                        if(toast.innerHTML != content || content == ''){
+                            toast.innerHTML = content
+                        }
+                    }
+                }
+            },
+            // 取消拖动时间
+            doc_up(e){
+                if(this.current_data.start_time < this.start_time || this.current_data.end_time > this.end_time){
+
+                    if(this.current_data.start_time < this.start_time){
+
+                        emitter.$emit('triggerInit',this.current_data.start_time, this.end_time)
+                    }
+                    if(this.current_data.end_time > this.end_time){
+                        emitter.$emit('triggerInit',this.start_time, this.current_data.end_time)
+                    }
+                }
+                document.removeEventListener('mousemove',this.doc_move,false);
+                document.removeEventListener('mouseup',this.doc_up,false);
+                document.body.classList.remove('unselecttable');
+                document.body.style.cursor = null;
+                if(this.DragObject.startX != e.clientX){
+                    emitter.$emit('onDragChangeTime',
+                        {
+                            gunter_id: this.current_data.gunter_id,
+                            start_time: this.DragObject.start_time,
+                            end_time: this.DragObject.end_time,
+                            width: this.DragObject.start_width,
+                            left: this.DragObject.start_left,
+                            startAttr: this.DragObject.startAttr,
+                            endAttr: this.DragObject.endAttr,
+                        },
+                        {start:this.current_data.params[this.DragObject.startAttr],end:this.current_data.params[this.DragObject.endAttr],gunter_id: this.current_data.gunter_id});
+                }
+                this.DragObject = {
+                    startX: 0, // 开始的位置
+                    mouseDown: false,// 是否按下了鼠标
+                    scale: 0, // 刻度
+                    mode: 1, // 默认以小时为单位 1:小时 2 ：天
+                    start_width: 0,// 记录开始的宽度
+                    start_left: 0,// 记录开始的宽度
+                    start_time: null, // 记录开始拖动时的时间
+                    end_time:null,  // 记录开始拖动时的时间
+                    startAttr: null,// 开始时间的属性名
+                    endAttr: null,// 结束时间的属性名
+                    move_type: null,
+                };
+                this.hideToast();
+            }
+        }
+    }
+</script>
+
+<style scoped lang="less">
+    .ganteview-item {
+        height: 20px;
+        line-height: 20px;
+        padding-left: 10px;
+        border-radius: 3px;
+        background: #00b0ff;
+        cursor: grab;
+        width: 0;
+        /*transition: width .5s linear, opacity .2s ease;*/
+        opacity: 0.5;
+        position: relative;
+        .ganteview-item__label{
+            display: block;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        .left-drag-line,.right-drag-line{
+            position: absolute;
+            left: -15px;
+            height: 26px;
+            width: 15px;
+            top: 2px;
+            margin-top: -5px;
+            cursor: e-resize;
+            &:hover:after{
+                border-color: #3396fb;
+            }
+            &:after{
+                position: absolute;
+                content: '';
+                left: 6px;
+                top:8px;
+                width: 2px;
+                height: 10px;
+                border-left: 1px solid rgba(0,0,0,0.5);
+                border-right: 1px solid rgba(0,0,0,0.5);
+            }
+        }
+        /* 左边显示的时间 */
+        .time-tip-left{
+            position: absolute;
+            left: -85px;
+            width: 67px;
+            height: 15px;
+            line-height: 15px;
+            padding: 3px 4px;
+            border-radius: 3px;
+            background: #333;
+            color: #fff;
+            font-size: 12px;
+        }
+        .right-drag-line{
+            right: -15px;
+            left: auto;
+        }
+        .ganter_drag_hover{
+            position: absolute;
+            left: -15px;
+            height: 26px;
+            width: ~'calc(100% + 30px)';
+            top: -3px;
+            z-index: -1;
+            box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.2);
+            border-radius: 3px;
+        }
+        &:hover{
+            .left-drag-line,.right-drag-line,.ganter_drag_hover{
+                display: block;
+            }
+        }
+    }
+
+    .ganteview-item:hover {
+        opacity: 1;
+    }
+
+    .ganteview-item.has-child {
+        height: 15px;
+        background: none!important;
+        border-style: solid;
+        border-width: 10px 5px 10px;
+        border-top-left-radius: 2px;
+        border-top-right-radius: 2px;
+        box-sizing: border-box;
+        .left-drag-line,.right-drag-line{
+            left: -17px;
+            top: -10px;
+            &:after{
+                left: 4px;
+            }
+        }
+        .right-drag-line{
+            right: -17px;
+            left: auto;
+            &:after{
+                left: 6px;
+            }
+        }
+        .ganter_drag_hover{
+            top: -15px;
+            width: calc(100% + 34px);
+            left: -17px;
+        }
+        .time-tip-left{
+            top: -12px;
+        }
+    }
+</style>

package/components/gante_test/gante-gc-item.vue

@@ -0,0 +1,95 @@
+<!--整体条块，同级任务-->
+<template>
+    <div class="ganteview-content">
+        <div v-for="(item,index) in gante_data" :key="index" class="ganteview-ones">
+            <div  class="ganteview-content-one" :class="{gj_hover_class: item.is_hover}" @mouseenter="enterTr($event,item)"
+                 @mouseleave="leaveTr($event,item)">
+                <ganteGcItemContent
+                    :start_time="start_time"
+                    :end_time="end_time"
+                    :current_data="item"
+                    :index="index"
+                    :th_data="th_data"
+                    :time_1px="time_1px"
+                    :time_mode="time_mode"
+                    :toast-render="toastRender"
+                    :toast-class="toastClass"></ganteGcItemContent>
+                <!--<ganteDragCircle :current_data="item"></ganteDragCircle>-->
+            </div>
+            <ganteview-item
+                v-show="item.open"
+                :start_time="start_time"
+                :end_time="end_time"
+                v-if="item.children"
+                :th_data="th_data"
+                :time_1px="time_1px"
+                :time_mode="time_mode"
+                :toast-render="toastRender"
+                :toast-class="toastClass"
+                :gante_data="item.children">
+                <span style="display: none">1</span>
+            </ganteview-item>
+        </div>
+        <slot></slot>
+
+    </div>
+</template>
+<script>
+    import ganteGcItemContent from './gante-gc-item-content'
+    // import ganteDragCircle from './gante-drag-circle'
+    export default {
+        name: 'ganteview-item',
+        components:{
+            ganteGcItemContent
+        },
+        data() {
+            return {
+                canAnimation: false,
+                bol: false,
+            }
+        },
+        props: {
+            gante_data: Array,
+            th_data: Object,
+            time_1px:Number, // 1px代表的时间
+            time_mode:[Number,String],
+            start_time: {}, //开始时间
+            end_time: {},
+            toastRender: Function,
+            toastClass: String,
+        },
+        methods: {
+            // 进入到了tr上
+            enterTr(ev, tr) {
+                this.$set(tr, 'is_hover', true)
+            },
+            // 离开了tr
+            leaveTr(ev, tr) {
+                this.$set(tr, 'is_hover', false)
+            },
+
+        }
+    }
+</script>
+<style scoped lang="less">
+    .ganteview-content {
+        position: relative;
+        .ganteview-ones-seat{
+            height: 41px;
+            line-height: 40px;
+        }
+    }
+
+    .ganteview-content-one {
+        height: 51px;
+        box-sizing: border-box;
+        line-height: 50px;
+        border-bottom: 1px solid #ebeef5;
+        position: relative;
+        z-index: 1;
+    }
+    .ganteview-content-one.gj_hover_class{
+        background: rgba(246, 246, 246, 0.7);
+    }
+
+</style>