会议时间轴

![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=htts%3A%2F%2Fimg-blog.csdnimg.cn%2Fdirect%2F31f84fe858b748d0ac361959d24541c4.png%23pic_centr&pos_id=img-V0zFYAOc-1707125402193

<view v-else class="u-p-t-120 u-p-b-20">
   <view class="bgfff u-p-20" v-for="(item,index) in conferenceList" :key="item.id">
      
      <view class="u-flex u-col-center">
        <u-image style="flex: 0 0 300rpx;" width="300rpx" height="200rpx" border-radius="20" :src="item.conferenceImg"></u-image>
        <view class="u-m-l-20">
          <view>
            <text class="fw700 u-m-r-20 u-font-32">{{item.conferenceName}}</text>
            <text>坐席{{item.limitMaxCount}}人</text>
          </view>
          <view class="c909399 u-m-t-20 u-m-b-20">会议室地点：{{item.conferenceLocation}}</view>
          <view class="u-flex" style="flex-wrap: wrap;">
            <view v-for="(v,index) in item.conferenceDesc" :key="v" class="descClass">{{v}}</view>
          </view>
        </view>
      </view>
      
      <!-- 时间轴部分 -->
      <view class="time_body" @click="timeAxisClick(item)">
        <view class="u-flex u-col-center" style="overflow: auto;">
          <view class="time_body_item" v-for="(timeObj,i) in item.arr" :key="i" v-if="timeObj.stepArr && timeObj.stepArr.length">
            <view class="timeObj">{{timeObj.startNodeTime}}</view>
            <view class="u-flex">
              <view v-for="(node,index) in timeObj.stepArr" :key="'node'+index" class="color_item" :class="[node.isReserved ? 'activeClass' : node.id <= new Date().getTime()+systemCfg.reserveMinTime*60*1000 && !node.isReserved ? 'bgfff' : '']">
                <u-icon 
                  name="jinyong1" 
                  size="92"
                  color="#ccc"
                  custom-prefix="custom-icon"
                  v-if="node.id <= new Date().getTime()+systemCfg.reserveMinTime*60*1000 && !node.isReserved"></u-icon>
                <text v-if="node.id > new Date().getTime()+systemCfg.reserveMinTime*60*1000 && !node.isReserved">空闲</text>
					<text v-if="node.isReserved">已约</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>

从服务器获取所有的会议室信息，数组格式

data.records.forEach(v => {
	 v.conferenceDesc = v.conferenceDesc ? v.conferenceDesc.split(',') : [];
	 // 其中reserveMinTime是配置的会议可预订最小时段，值为15分钟，30分钟，60分钟；
 	 let startTimeStamp  = new Date(v.startTime.replace(/-/g,'/')).getTime(),
     	 endTimeStamp  = new Date(v.endTime.replace(/-/g,'/')).getTime(),
     	 reserveMinTime = system.reserveMinTime;
 	 let diff = endTimeStamp - startTimeStamp;
 	 let step = reserveMinTime*60*1000;
  
	 let arr2 = []
  	for(let i= 0,index = 0;i < diff;i+=60*60*1000,index++){
    	arr2[index] = {
      		startNodeTime:this.$u.timeFormat(startTimeStamp+i, 'hh:MM'),
      		endNodeTime:this.$u.timeFormat(startTimeStamp+i+60*60*1000, 'hh:MM')
   		}
   		for(let j=i+step; j<=i+60*60*1000; j+=step){
      		if(!arr2[index].stepArr){
        		arr2[index].stepArr = []
      		}
			if(new Date()*1 > startTimeStamp+j-system.reserveMinTime*60*1000) continue;
      		let time = this.$u.timeFormat(startTimeStamp+j, 'hh:MM');
      		// meetingTimeStep是当前会议室当天已经约过的时间戳集合，包含在内，说明当前时间点已经被预约了
     		arr2[index].stepArr.push({
        		id:startTimeStamp+j,
        		isReserved:v.meetingTimeStep.includes((startTimeStamp+j)/1000 +'') ? true : false,
        		time,
        		parentId:v.id,
        		step
      		})
    	}
  	}
 	v.arr = arr2;
})