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>。。。