react：预约会议室图列

最近来了一波骚操作，本以为可以用 echarts 实现，结果发现不对，目前就用了最笨的方式实现，算div高度。

场景：x 轴 为人名，y轴（24小时制度，间隔 15)，把对应的时间填在表格上。            

效果图如下：

 

涉汲到布局问题：

    左边固定，右边自适应（右边的内容超出有滚动条）怎么布局？

 

flex布局	样式
<div class="box">   <div class='left'>左边固定</div>   <div class='right'>         <div class='right_main'>           <ul>               <li>测试</li>           </ul>       </div>   </div> </div>	.box { width: 100%;height: 80vh;  display: flex; }     .left{ width: 100px;height: 100%;  flex: none;}     .right{ width: calc(100% - 100px);height: 100%;}     .right_main{ width: 100%; overflow-x: scroll; }     ul{ white-space: nowrap; }     ul li {       width: 100px; height: 80vh;       text-align: center; list-style: none;       display: inline-block;     }

 

解题思路：

 

    1､左侧时间固定，遍历时间，间隔为 15分钟。

 

for(let i=Date.parse('2018-01-01 00:00');i<Date.parse('2018-01-01 23:59');i+=900000) {     let newTime = new Date(i).toLocaleTimeString('chinese', { hour12: false });     newTime = newTime.substring(0,5)     console.log( newTime ) }

 

    2､ 时间间隔计算

         第一步：获取 JSON 数据里面的每条数据的开始时间、结束时间，最后转换成时间戳。

                        const starttime = new Date(val.starttime);

                        const endtime = new Date(val.endtime);

 

         第二步：日期转换中 和 结果都是：8。

                        所以需要取：时间+分钟

                        const starttimeHour = starttime.getHours() + starttime.getMinutes()/60;

                        const endtimeHour = endtime.getHours() + endtime.getMinutes()/60;

 

         第三步：预约会议室的时间段高度计算公式：（（开始时间-结束时间）／ 0.25）*40

                        0.25 = 间隔15分钟／一小时60分钟。

                        40 = 间隔的高度 <li></li> 的 height 为 40px。

                       const height =  ((endtimeHour - starttimeHour)/0.25)*40;

 

        第四步：预约会议室的时间段所在的距离（可以理解为距离顶部的高度 top)

                       // 偏移间隔的一半高度 防止看起来有偏差

                       // top height 以左侧间隔为单位计算，每个间隔 40像素。

                       const top =  (starttimeHour/0.25)*40+20;

 

         第五步：预约会议室的用途不一样，根据状态来设置时间段颜色

                      let color = '';

                      if(status == '0') {

                               color = '#f3aa5a';

                      } else if(status == '1') {

                              color = '#6ebeb0';

                      } else if(status == '2') {

                              color = '#000';

                      } else if(status == '3') {

                              color = '#f2f2f2';

                      }

 

         第六步：返回的数据

                        <li style={{

                                            position: 'absolute',

                                            width: '100%',

                                            top: isNaN(top) ? 0 : top,

                                            height: height,

                                            background: color,

                                            borderBottom: 1,

                                            borderColor: 'white',

                                            borderBottomStyle: 'solid',

                                            boxSizing: 'border-box'

                                       }}

                        ></li>

 

 

后端 JSON 数据格式如下：

data: {   "appointSpectacularsList": [{     "assistantname": "兜兜在测试哈哈哈",     "assistantscheduling": [       {         "id": "11",         "starttime": "2019-01-29 00:30:00",         "endtime": "2019-01-29 00:45:00",         "servicestatus": "0",       },       {         "id": "22",         "starttime": "2019-01-29 01:00:00",         "endtime": "2019-01-29 01:30:00",         "servicestatus": "1",       },       {         "id": "33",         "starttime": "2019-01-29 02:00:00",         "endtime": "2019-01-29 02:30:00",         "servicestatus": "2",       },       {         "id": "44",         "starttime": "2019-01-29 03:00:00",         "endtime": "2019-01-29 03:15:00",         "servicestatus": "3",       },       {         "id": "55",         "starttime": "2019-01-29 04:00:00",         "endtime": "2019-01-29 04:10:00",         "servicestatus": "1",       },       {         "id": "66",         "starttime": "2019-01-29 20:00:00",         "endtime": "2019-01-29 21:00:00",         "servicestatus": "0",       }     ] }]