首页 > 其他分享> > 会议室查询动态显示
会议室查询动态显示

2019-03-07 09:50:04 作者：互联网
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.min.js"></script>
    <style>
    </style>
</head>
<body>
<div id="app">
<table width="100%" border="1"  cellspacing="0" cellpadding="10"  style="text-align: center;border-color: rgba(240,240,240,0.3);" align="center">
    <tr>
        <th width="20%">会议名称</th>
        <th width="8%">9：00</th>
        <th width="8%">10：00</th>
        <th width="8%">11：00</th>
        <th width="8%">12：00</th>
        <th width="8%">13：00</th>
        <th width="8%">14：00</th>
        <th width="8%">15：00</th>
        <th width="8%">16：00</th>
        <th width="8%">17：00</th>
        <th width="8%">18：00</th>

    </tr>
    <tr v-for="item in mt">
        <td width="20%">{{item.address}}
            <button style="background-color: rgb(107,165,255);border-color:rgb(107,165,255);color: white;border-radius: 15px;">白板</button>
            <button style="background-color: rgb(107,165,255);border-color:rgb(107,165,255);color: white;border-radius: 15px;">视频</button>
        </td>
<!--        <td width="8%"><div :style="{border-radius:5px,line-height: 45px,background-color: rgb(254,113,86),height: 45px,position: relative,font-size: 10px}">{{item.title}}</div></td>-->
        <td width="8%" v-for="(lmj,index) in 10"><div :style="{
                    width:item.lwid,'font-size': '10px',position: 'relative','border-radius':'5px','line-height': '45px','background-color': 'rgb(254,113,86)',height: '45px',
                }" v-if="item.ltd==index">{{item.title}}</div></td>

    </tr>

</table>
</div>

<script>
    const vm=new Vue(
        {
            el: '#app',
            data: {

                origin: [{
                    address: '办公楼203会议室',
                    title: '项目报告',
                    startTime: '9:40',
                    endTime: '11:30'
                },
                    {
                        address: '综合楼203会议室',
                        title: '融资报告',
                        startTime: '13:40',
                        endTime: '14:30'
                    },
                    {
                        address: '大东门203会议室',
                        title: '报告项目融资',
                        startTime: '15:00',
                        endTime: '17:00'
                    },
                ],
                mt: [],
                allTime: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00']
            },
            methods:

                {
                compareTime: function (start, end) {
                    var lindex = [null, null];
                    var date = new Date();
                    var a = start.split(":");
                    var b = end.split(":");
                    var aStart = date.setHours(a[0], a[1]);
                    var bEnd = date.setHours(b[0], b[1]);


                    var i = 0;

                    for (i; i < this.allTime.length; i++) {
                        var ctime = this.allTime[i].split(":");
                        const alltime = date.setHours(ctime[0], ctime[1]);

                        if (aStart == alltime) {
                            lindex[0] = i;

                            break;
                        } else if (aStart < alltime) {
                            lindex[0] = i - 1;

                            break;
                        }
                    }
                    for (i; i < this.allTime.length; i++) {
                        var ctime = this.allTime[i].split(":");
                        const alltime = date.setHours(ctime[0], ctime[1]);
                        if (bEnd == alltime) {
                            lindex[1] = i;

                            break;
                        }
                        else if (bEnd < alltime) {
                            lindex[1] = i - 1;

                            break;
                        }
                    }
                    return lindex;
                },
                   lfilter:function () {
                    for (var i=0; i < this.origin.length; i++) {
                        var lb={ftcl:'',lwid:'',ltd:''}
                      var fl=  this.compareTime(this.origin[i].startTime,this.origin[i].endTime)
                        var b=((fl[1]-fl[0]+1)*100);
                        lb.ltd=fl[0];
                        var bb=b+'%';
                        lb.lwid=bb;
                        lb.ftcl='rgb(254,113,86)';
                      this.mt.push(lb);
                }
             //   console.log(this.mt)
            }
            },
            mounted:function () {
                this.lfilter();
            }
        }
    )
</script>
</body>
</html>
标签：动态显示,00,lb,ctime,会议室,查询,lindex,var,alltime
来源： https://blog.csdn.net/qq_41063141/article/details/88286104
会议室查询 动态显示

会议室查询动态显示
