iview Tab表格里面把时间轴里面的时间段，用开始-结束时间，阴影显示在Tab上

最新推荐文章于 2024-07-16 17:39:09 发布

2401_85158795

最新推荐文章于 2024-07-16 17:39:09 发布

阅读量157

点赞数 2

分类专栏：程序员文章标签： view design 前端 javascript

本文链接：https://blog.csdn.net/2401_85158795/article/details/140379766

版权

程序员专栏收录该内容

9 篇文章 0 订阅

订阅专栏

    //查询所有播表时间轴
    load_getTimeAxis() { 
        this.$axios({
            method: 'get',
            url: this.baseURL + '/broadcast/timeAxis/getTimeAxis_View',
            params: {
                currentPage: this.currentPage,
                pageSize: this.pageSize,
            }
        })
        .then((res)=> {
            console.log(res.data);
            this.historyData = res.data.list;  //把结果拿到的数据赋给table
            this.dataCount = res.data.total; //所有的条数
        }).catch((error) =>{})
    },
    times(){
        // 24*60*60 = 86400 秒
        // 02:00- 02:30   1.( 2*60*60 = 7200)  7200 秒 / 86400 秒=  0.083;   2.(2.5*60*60 / 24*60*60 = 0.104;)  第一个点的位置是在 8.3% 到 10.4% 的位置
    },
    // 计算left值
    countLeftValue(timeRange) {
        // let width = this.$refs.timeBox
        // let timeRange = "00:00:00-01:01:00";
        let totalTime = 24*60*60 // s
        let startTime = timeRange.split('-')[0].split(':')[0] *60 * 60 + timeRange.split('-')[0].split(':')[1] *60 + Number(timeRange.split('-')[0].split(':')[2]) // 秒
        let endTime = timeRange.split('-')[1].split(':')[0] *60 * 60 + timeRange.split('-')[1].split(':')[1] *60 + Number(timeRange.split('-')[1].split(':')[2])  // 秒
        let left = (startTime / totalTime) * 100 + '%'
        let width =( (endTime - startTime) / totalTime) * 100 + '%'
        console.log(endTime, startTime, totalTime, width)
        return {left: left, width: width}
    },
    //列表左侧checkbox
    selectTable(data){   
        this.selectData = data;
        console.log(data);
    },
    //修改每页显示条数时调用
    pages(num) { 
        this.pageSize = num;
        this.changepage(1);
    },
    changepage(index) {

    },

},
created(){
    //查询所有播表时间轴
    this.load_getTimeAxis();
},

真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲
详情关注公中号【编程进阶路】

computed:{
    // this.countLeftValue()
},
mounted(){

}

}



**方法二**


列子：


beginTime:"00:00:00",


endTime:"11:59:59",


如果返回的一个开始时间和结束时间，并且以这个为时间轴的起点  和重点位置；


这时，需要重新计算每行的 总时间：totalTime


let new\_endTime = endTime.split('-')[0].split(':')[0] \*60 \* 60 + endTime.split('-')[0].split(':')[1] \*60 + Number(endTime.split('-')[0].split(':')[2]); // 秒


let new\_beginTime = beginTime.split('-')[0].split(':')[0] \*60 \* 60 + beginTime.split('-')[0].split(':')[1] \*60 + Number(beginTime.split('-')[0].split(':')[2]); // 秒


let totalTime = (new\_endTime - new\_beginTime);



**小心有坑：**


left 的值会变化；如果起始时间 从0点0分0秒 开始是正常的，否则有bug；


let left = (start\_Time / totalTime) \*100;


let width =( (end\_Time - start\_Time) / totalTime)\*100 + '%';



if( left >100 ){


left = (left - 100 )+ '%'


}else{


left = left + '%'


}


详细代码如下：