日程表

vue实现一个简单的日程表：

写在home.vue文件中了

<template>
    <div class="homeBox">
        <table>
            <!-- 时间轴 -->
            <tr>
                <td ><div :style="{width:2*tableWidth+'px',height:tableHeight+'px'}"></div></td>
                <td v-for="(item,index) in arrLength" :key="index">
                    <div class="timeWrap" :style="{width:tableWidth+'px',height:tableHeight+'px'}">
                        <span>{{minTOhm(index,step,startTime)}}</span>
                    </div>
                </td>
            </tr>
            <!-- 表格 -->
            <tr v-for="(tableItem,index) in sessionDataArr" :key="'table'+index">
                <td ><div class="roomName" :style="{width:2*tableWidth+'px',height:tableHeight+'px',lineHeight:tableHeight+'px'}">{{tableItem.roomName}}</div></td>
                <td v-for="(item,index) in tableItem.sessionArr"
                    class="itemcell"
                    :key="index+'tableItem'"
                    :colspan="item.colspan?item.colspan:''">
                    <div class="itemTd"
                        :style="{width:item.colspan?(item.colspan*tableWidth)+'px':tableWidth+'px',height:tableHeight+'px'}"
                        :title="item.text">
                        <a class="linkEle" href="javascript:">
                            <span class="session_text">{{item.text}}</span>
                        </a>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
// @ is an alias to /src
import tools from "@/util/tools.js";
import global from "@/util/global.js";
import api from "@/util/api.js";
export default {
    name: "home",
    components: {
    },
    data(){
        return{
            tableWidth:50,
            tableHeight:50,
            startTime:"08:00",//日程开始时间
            endTime:"22:15",//日程结束时间
            step:10,//时间间隔
            sessionData:[//模拟的session数据
                {
                    roomName:"多功能厅A",
                    sessionArr:[
                        {startTime:"08:00",endTime:"08:30",text:"心血管研究心血管研究",colspan:""},
                        {startTime:"09:00",endTime:"09:10",text:"心血管研究",colspan:""},
                        {startTime:"09:20",endTime:"09:30",text:"是打发",colspan:""},
                        {startTime:"09:40",endTime:"10:00",text:"分发大时分发时分发送到",colspan:""},
                    ]
                },
                {
                    roomName:"多功能厅B",
                    sessionArr:[
                        {startTime:"08:00",endTime:"08:50",text:"sessionB心血管研究",colspan:""},
                        {startTime:"09:00",endTime:"09:10",text:"大脑研究",colspan:""},
                        {startTime:"15:20",endTime:"15:50",text:"哈哈哈",colspan:""},
                        {startTime:"21:00",endTime:"21:20",text:"分发大时",colspan:""},
                    ]
                },
                {
                    roomName:"多功能厅C",
                    sessionArr:[
                        {startTime:"08:00",endTime:"08:50",text:"sessionB心血管研究",colspan:""},
                        {startTime:"09:00",endTime:"09:10",text:"大脑研究",colspan:""},
                        {startTime:"15:20",endTime:"15:50",text:"哈哈哈",colspan:""},
                        {startTime:"21:00",endTime:"21:20",text:"分发大时",colspan:""},
                    ]
                },
            ],

            arrLength:0,//总共与多上格子(不用后台传，是计算出来的))
            sessionDataArr:[],//根据后台数据 生成的最终表格数据（不用后台传）
        }
    },
    created(){
        this.generaterAllTable(this.sessionData);//生成整个表格数据  
    },
    mounted(){

    },
    methods:{
        hmTOmin(hm){//hh:mm=>分钟或则秒
            var arr=hm.split(":"),H,M,sum={M:'',S:''};
            if(/^0[0-9]$/.test(arr[0])){
                H=Number(arr[0].replace("0",''));
            }else{
                H=Number(arr[0]);
            }
            if(/^0[0-9]$/.test(arr[1])){
                M=Number(arr[1].replace("0",''));
            }else{
                M=Number(arr[1]);
            }
            sum.M=Number(H*60+M);
            sum.S=Number((H*60+M)*60);
            return sum;
        },
        minTOhm(index,step,startTime){//计算时间轴
            var str="",h,m,self=this;
            if(index==0){
                str=startTime;
            }else{
                var sumMIn=self.hmTOmin(startTime).M+(step*index);
                h=parseInt(sumMIn/60);
                m=sumMIn%60;
                if(h<10){
                    h='0'+h;
                }
                if(m<10){
                    m='0'+m;
                }
                str=h+":"+m;
            }
            return str;
        },
        generaterCol(sessionArr){//生成某一列的session数组
            var self=this,colArr=[];
            self.generaterArrLength();//计算时间轴的长度 下面能用到
            var sessionTd=0;//session所占的总格数
            sessionArr.forEach((item,index,arr)=>{
                item.colspan=Math.ceil((self.hmTOmin(item.endTime).M-self.hmTOmin(item.startTime).M)/self.step);
                sessionTd+=item.colspan;
            })

            var tableColArrLength=self.arrLength-sessionTd+sessionArr.length;//日程某一列有多少个单元格,也就是某一列数组的长度

            for(let i=0,len=tableColArrLength;i<len;i++){//可以考虑抽离出去
                var obj={startTime:"",endTime:"",text:"",colspan:""};
                colArr[i]=obj;
            }

            function addData(){//向某一列数组中添加数据
                var count=0;//计算每个session前面有
                sessionArr.forEach((item,index,arr)=>{
                    var itemIndex=Math.floor((self.hmTOmin(item.startTime).M-self.hmTOmin(self.startTime).M)/self.step);
                    colArr[itemIndex-count].startTime=item.startTime;
                    colArr[itemIndex-count].endTime=item.endTime;
                    colArr[itemIndex-count].text=item.text;
                    colArr[itemIndex-count].colspan=item.colspan;
                    count+=(item.colspan-1);
                })
            }
            addData();
            return colArr;//将生成的某一列数据返回出去
        },
        generaterArrLength(){//计算出事件轴的长度
            var self=this;
            var sumMIN=self.hmTOmin(self.endTime).M-self.hmTOmin(self.startTime).M;
            self.arrLength=Math.ceil(sumMIN/self.step);//总共有多少格子
        },
        generaterAllTable(sessionData){//生成整个session表
            var self=this,arr=[];
            sessionData.forEach((item,index,arr)=>{
                var obj={
                    roomName:"",
                    sessionArr:[],
                };
                obj.roomName=item.roomName;
                obj.sessionArr=self.generaterCol(item.sessionArr);
                self.sessionDataArr.push(obj);
            });
            console.log(self.sessionDataArr);
        }
    }
};
</script>

<style scoped>
    .homeBox{
    }
    @media screen and (max-width:768px){
        .min768{
            display:block;
        }
        .max768{
            display: none;
        }
    }
    @media screen and (min-width:768px){
        .min768{
            display:none;
        }
        .max768{
            display: block;
        }
    }
    .timeWrap{
        position: relative;
    }
    .timeWrap span{
        position: absolute;
        bottom:0;
        left:0;
        transform-origin: left bottom;
        transform:rotateZ(-45deg)
    }
    .itemTd{
        border:2px solid #ffffff;
        border-radius:5px;
        background:brown;
        box-sizing: border-box;
        text-align: center;
        position: relative;
    }
    .session_text{
        position: absolute;
        top:50%;
        width:100%;
        transform: translateY(-50%);
        display: -webkit-box;
        overflow: hidden;
        white-space: normal;
        text-overflow: ellipsis;
        word-wrap: break-word;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .itemcell{
        vertical-align: middle;
    }
    .roomName{
        border:2px solid #ffffff;
        border-radius:5px;
        background:yellow;
        text-align: center;
        box-sizing: border-box;
    }
    .linkEle{
        text-decoration: none;
        color:black;
    }
</style>

。。。