最近來了一波騷操作，本以爲可以用 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", } ] }] |