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

最新推荐文章于 2022-10-14 14:12:27 发布
最新推荐文章于 2022-10-14 14:12:27 发布
阅读量706 收藏
点赞数
分类专栏： 日期范围相关组件 文章标签： iview  Tab表格里面把时间轴里面的时间段，用开始-结
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41646249/article/details/100118933
版权

先不废话，上效果图一：

时间轴为（0-24点）

具体代码如下：

<template>
  <div>
        <div class="listfile">
            <Table border ref="selection" :columns="historyColumns" :data="historyData" @on-select-all='selectTable' @on-select='selectTable' @on-select-cancel='selectTable'>
                <template slot-scope="{row}" slot="timeAxis">
                    <div class="timeBox" ref="timeBox">
                        <!-- 标题文字 -->
                        <div class="timeRange" :title="item" :style="{left:countLeftValue(item).left, width: countLeftValue(item).width}" v-for="(item,index) in row.timeAxis" :value="item.value" :key="index">
                        </div>
                    </div>
                </template>      
            </Table>
            <div style="margin: 10px;overflow: hidden">
                <div style="float: right;">
                    <Page :total="dataCount" :page-size="pageSize" show-total  @on-change="changepage"></Page>
                </div>
            </div>
        </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            dataCount:1,// 初始化信息总条数
            currentPage:0,
            pageSize:10, // 每页显示多少条
            below: 0, //下一页或者上一页的第一项索引值  
            historyColumns: [
                {type: 'selection', width: 60,align: 'center'},
                {title: '播表名称',key: 'broadCastName',width: 120,align: 'center'},
                {title: '时间轴',slot: 'timeAxis',align: 'center'},
                {title: '总时长',key: 'sumtime',width: 100,align: 'center'},
            ],
            historyData:[
                // { broadCastId: "0810000100120190820092825", broadCastName: "周一", sumtime: "75",timeAxis: ["03:00:00-03:00:40"]},
                // { broadCastId: "0810000100120190820154046",broadCastName: "列车广播",sumtime: "3075",timeAxis: ["03:02:02-03:02:23", "05:05:05-05:05:59", "09:00:00-09:50:00"]}
            ]
        }
    },
    methods:{
        //查询所有播表时间轴
        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(){

    }
}
</script>

<style type="text/css">
    .timeBox {
        width: 100%;
        height: 24px;
        border: 1px solid #ccc;
        border-radius: 4px;
        position: relative;
    }
    .timeBox .timeRange {
        position: absolute;
        top:0;
        display: inline-block;
        background-color: greenyellow;
        height: 100%;
        cursor: pointer;
    }
    .listfile{padding:15px 0 15px 0;}
    .ivu-page{
        font-size: 12px !important;  
    }
    td.ivu-table-column-center{height:36px !important;}

</style>

方法二

列子：

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 + '%'

}

详细代码如下：

<template>
  <div>
        <div class="listfile">
            <Table border ref="selection" :columns="historyColumns" :data="historyData" @on-select-all='selectTable' @on-select='selectTable' @on-select-cancel='selectTable'>
                <template slot-scope="{row}" slot="timeAxis">
                    <div class="timeBox" ref="timeBox">
                        <!-- 标题文字 -->
                        <div class="timeRange" :title="item" :style="{left:countLeftValue(item,row.beginTime,row.endTime).left, width: countLeftValue(item,row.beginTime,row.endTime).width}" v-for="(item,index) in row.timeAxis" :value="item.value" :key="index">
                        <!-- {{item}} -->
                        </div>
                    </div>
                </template>      
            </Table>
            <div style="margin: 10px;overflow: hidden">
                <div style="float: right;">
                    <Page :total="dataCount" :page-size="pageSize" show-total  @on-change="changepage"></Page>
                </div>
            </div>
        </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            dataCount:1,// 初始化信息总条数
            currentPage:0,
            pageSize:10, // 每页显示多少条
            below: 0, //下一页或者上一页的第一项索引值
            historyColumns: [
                {type: 'selection', width: 60,align: 'center'},
                {title: '播表名称',key: 'broadCastName',width: 120,align: 'center'},
                {title: '时间轴',slot: 'timeAxis',align: 'center'},
                {title: '总时长',key: 'sumtime',width: 100,align: 'center'},
            ],
            historyData:[
                { broadCastId: "0810000100120190820092825", broadCastName: "周一", sumtime: "75",timeAxis: ["00:00:00-06:00:00", "09:00:00-11:59:59"],beginTime:"00:00:00",endTime:"11:59:59",},
                { broadCastId: "0810000100120190820154046",broadCastName: "列车广播",sumtime: "3075",timeAxis: ["12:00:00-13:59:59", "19:00:00-21:59:59","22:08:00-23:59:59"],beginTime:"12:00:00",endTime:"23:59:59",},
                { broadCastId: "0810000100120190820092825", broadCastName: "周二", sumtime: "75",timeAxis: ["01:00:00-02:00:00","03:00:00-4:59:59"],beginTime:"00:00:00",endTime:"05:59:59",},
                { broadCastId: "0810000100120190820092825", broadCastName: "周三", sumtime: "75",timeAxis: ["01:00:00-06:00:00", "09:00:00-10:59:59"],beginTime:"00:00:00",endTime:"11:59:59",},
                { broadCastId: "0810000100120190820092825", broadCastName: "周四", sumtime: "75",timeAxis: ["11:00:00-13:00:00",],beginTime:"00:00:00",endTime:"23:59:59",}
            ]
        }
    },
    methods:{
        //查询所有播表时间轴
        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,beginTime,endTime) {
            // let width = this.$refs.timeBox
            // let timeRange = "00:00:00-01:01:00";
            // let totalTime = 24*60*60 // s  
            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);
            // console.log("结束时间：",new_endTime,"开始时间：",new_beginTime,"总时间：",totalTime);

            let start_Time = timeRange.split('-')[0].split(':')[0] *60 * 60 + timeRange.split('-')[0].split(':')[1] *60 + Number(timeRange.split('-')[0].split(':')[2]); // 秒
            let end_Time = timeRange.split('-')[1].split(':')[0] *60 * 60 + timeRange.split('-')[1].split(':')[1] *60 + Number(timeRange.split('-')[1].split(':')[2]);  // 秒
            
            let left = (start_Time / totalTime) *100;
            let width =( (end_Time - start_Time) / totalTime)*100 + '%';

            if( left >100 ){
                left = (left - 100 )+ '%' 
            }else{
                left = left + '%' 
            }
            console.log(end_Time, start_Time, totalTime, width,left);
            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(){

    }
}
</script>

<style type="text/css">
    .timeBox {
        width: 100%;
        height: 24px;
        border: 1px solid #ccc;
        border-radius: 4px;
        position: relative;
    }
    .timeBox .timeRange {
        position: absolute;
        top:0;
        display: inline-block;
        background-color: greenyellow;
        height: 100%;
        cursor: pointer;
    }
    .listfile{padding:15px 0 15px 0;}
    .ivu-page{
        font-size: 12px !important;  
    }
    td.ivu-table-column-center{height:36px !important;}

</style>

效果图：

最后为了方便大家的沟通与交流请加QQ群： 625787746

请进QQ群交流：【IT博客技术分享群①】：https://jq.qq.com/?_wv=1027&k=DceI0140

IT博客技术分享
关注
专栏目录
iview-2个datepicker结束时间在开始时间之后
weixin_43844440的博客
12-08 316
iview-2个datepicker结束时间在开始时间之后 其实不需要选择后提示，可以做到结束时间只可以在开始时间后选择，之前日期不可选，这样也不用考虑去做复杂的验证。 DatePicker 日期选择器： 设置属性 options 对象中的 disabledDate 可以设置不可选择的日期。 disabledDate 是函数，参数为当前的日期，需要返回 Boolean 是否禁用这天。 以下为页面代码： <DatePicker type="date" v-model="value.startT
水平滚动时间轴
05-26
一款非常漂亮 实用的时间轴插件
vue使用iview Timeline 时间轴不显示问题
weixin_30673611的博客
05-28 630
vue Timeline 时间轴不显示渲染的效果 官网代码 <Timeline pending> <TimelineItem>发布1.0版本</TimelineItem> <TimelineItem>发布2.0版本</TimelineItem> <TimelineItem&...
自定义View实现时间轴
刘鑫的博客
03-22 448
时间轴 时间轴，顾名思义就是将发生的事件按照时间顺序罗列起来，给用户带来一种更加直观的体验。京东和淘宝的物流顺序就是一个时间轴（如图），想必大家都不陌生。 时间轴的初探 初次见到这种UI，感觉整个布局似曾相识，但面对那条时间轴却又不知如何下手。其实，整个时间轴还是可以当做一个ListView处理，只是在Adapter中的布局要花点心思。好了，废话不说，看代码。 Attrs 属性 开...
视频直播网站源码，iView 日期时间选择器设置开始时间至结束时间限制
云豹网络科技
10-14 215
以上就是视频直播网站源码，iView 日期时间选择器设置开始时间至结束时间限制， 更多内容欢迎关注之后的文章。视频直播网站源码，iView 日期时间选择器设置开始时间至结束时间限制。开始时间不能大于结束时间。结束时间不能小于开始时间。
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
10-18
例如，在开始时间选择器变化时，我们可以禁用结束时间选择器中早于开始时间的日期。同理，在结束时间变化时，我们也需要禁用开始时间选择器中晚于结束时间的日期。 知识点五：实例代码解析 为了实现开始时间和结束...
解决iView中时间控件选择的时间总是少一天的问题
08-27
然而，在使用 iView 的时间控件时，经常会遇到一个问题，即选择的时间总是少一天。这是因为 iView 的时间控件默认使用 UTC 时间，而不是本地时间。下面我们将详细介绍这个问题的解决方案。 问题的原因 ------------...
iview table 表格实现 单列超出隐藏 鼠标悬浮出现详情
01-07
效果图 直接复制粘贴下面代码 就可以 { title: '交易订单号', align: 'center', key: 'id', minWidth: 120, render: (h, params) => { let texts=params.row.id; //这里的params.row.id 是 key值 ...
一款精简实用的时间轴插件一timeline
01-11
插件描述：一款精简实用的时间轴插件。 参考实例：http://www.jq22.com/jquery-info5483
时间轴组件
08-22
web前端的时间轴展示组件。
10款特别实用的时间轴插件
08-21
10款炫酷的时间轴demo：如我们将新闻之类的内容按照月份排列，形成了一个垂直的时间轴，当在宽大屏幕上，时间轴的事件是在轴的两侧排列，而在较小的屏幕如手机屏幕，时间轴的事件会排列在轴的一侧。当然时间轴事件内容支持任意html元素内容。
不分页切换iview tab
前端技术大牛
09-10 556
不分页切换iview tab <Tabs @on-click="changeTab"> <TabPane :label="'全部'+(tagCount[0] ? tagCount[0] : 0)" name="0"></TabPane> <TabPane :label="'新建'+(tagCount[1] ? tagCount[1] : 0...
vue使用iview Timeline 时间轴不显示渲染的效果问题解决方案
05-28 4435
vue Timeline 时间轴不显示渲染的效果 官网代码 &lt;Timeline pending&gt; &lt;TimelineItem&gt;发布1.0版本&lt;/TimelineItem&gt; &lt;TimelineItem&gt;发布2.0版本&lt;/TimelineItem&gt; &lt;TimelineIte...
HTML5+CSS3实现的响应式垂直时间轴
weixin_30820151的博客
09-13 924
<!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>演示：HTML5+CSS3实现的响应式垂直时间轴</titl...
vue使用iview Timeline 时间轴不显示渲染的效果问题解决办法
05-28 1734
预期的效果是 官网代码 点击(此处)折叠或打开 &lt;Timeline pending&gt;         &lt;TimelineItem&gt;发布1.0版本&lt;/TimelineItem&gt;         &lt;TimelineItem&gt;发布2.0版本&lt;/TimelineItem&gt;         &lt;TimelineIt...
vue 实现横向时间轴
热门推荐
weixin_34320724的博客
05-28 1万+
效果： <template> <!--时间线--> <div class="timeLine" style="overflow: hidden;"> <div class="content"> <p class="tit">{{timeLineList[timeI...
iView 日期时间选择器设置开始时间至结束时间限制
最新发布
05-30
您可以使用 iView 的 `DatePicker` 和 `TimePicker` 组件配合使用来实现日期时间选择器，并且可以通过设置 `disabledDate` 函数来限制开始时间至结束时间。 以下是一个示例代码： ```html v-model=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IT博客技术分享

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值