Web显示钉钉智能会议室申请信息，调用钉钉接口
界面展示各会议室申请的信息
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>会议室看板</title> 8 <!-- css设置 --> 9 <style type="text/css"> 10 /* 依次绘制矩形框 */ 11 .triangle { 12 writing-mode: lr-tb; /*css设置对象书写方向*/ 13 position: fixed; /*相对浏览器的位置*/ 14 width: 100%; 15 height: 0; 16 border: solid; 17 border-width:400px 500px; 18 border-color:rgb(9, 10, 83); 19 border-radius: 10px; /*圆角*/ 20 21 } 22 .triangle1 { 23 writing-mode: lr-tb; 24 position: fixed; 25 top: 80px; 26 left: 20px; 27 width: 0; 28 height: 0; 29 border: solid; 30 border-width:150px 270px; 31 border-color:rgb(224, 111, 18); 32 border-radius: 10px; 33 } 34 35 .triangle2 { 36 writing-mode: lr-tb; 37 position: fixed; 38 top: 90px; 39 left: 40px; 40 width: 0; 41 height: 0; 42 border: solid; 43 border-width:50px 250px; 44 border-color:rgb(240, 161, 13); 45 border-radius: 10px; 46 47 } 48 49 .triangle3 { 50 position: fixed; 51 top: 80px; 52 left: 580px; 53 width: 0; 54 height: 0; 55 border: solid; 56 border-width:70px 150px; 57 border-color:rgb(248, 138, 11); 58 border-radius: 10px; 59 60 } 61 62 .triangle4 { 63 position: fixed; 64 top: 240px; 65 left: 580px; 66 width: 0; 67 height: 0; 68 border: solid; 69 border-width:70px 150px; 70 border-color:rgb(248, 138, 11); 71 border-radius: 10px; 72 73 } 74 75 .triangle5 { 76 position: fixed; 77 top: 400px; 78 left: 20px; 79 width: 0; 80 height: 0; 81 border: solid; 82 border-width:70px 430px; 83 border-color:rgb(235, 159, 73); 84 border-radius: 10px; 85 86 } 87 </style> 88 </head> 89 <body> 90 91 <div class="triangle"> 92 <text id="roomName" style="color:rgba(255, 255, 255); position: fixed; font-size:35px;left: 150px;top: 20px;"></text> 93 </div> 94 <div class="triangle1"> 95 <text style="font-size:15px;color: #ffffff;position: fixed;left: 380px;top: 330px;" > 会议预约二维码</text> 96 </div> 97 <div class="triangle2" id="meetingRoom"> 98 <!-- <text id="meetingSummary" style="color:rgb(255, 255, 255); font-size:40px;position: fixed;left: 60px;top: 100px;">暂无会议</text> --> 99 </div> 100 <div class="triangle3"> 101 <text id="date" style="color: #ffffff;position: fixed; left: 600px; top: 90px;font-size: large; font-weight: bolder;"></text> 102 <text id="time" style="color: #ffffff;position: fixed; left: 600px; top: 110px;font-size: 70px; font-weight: bolder;"></text> 103 <text id="midday" style="color: #ffffff;position: fixed; left: 810px; top: 170px;font-size: 20px; font-weight: bolder;"></text> 104 </div> 105 <div class="triangle4"> 106 <text style="color:rgb(255, 255, 255); font-size:80px;position: fixed;left: 650px;top: 250px;">0°</text> 107 </div> 108 <div class="triangle5" id="meetingRoomDetails"> 109 110 </div> 111 <text x="610" y="350" style="fill:rgba(255, 255, 255); font-size:90px;"> 0° </text> 112 113 <div style="text-align: left; position: absolute; left: 383px; top: 220px;font-size: 20px; font-weight: bolder;"> 114 <img src="./24f8c54e4ea868ece5b1e6263a2ed809db5b1b34cd1747a0.png" alt="二维码显示错误！" width="100" height="100" id="img01" style="left: 10px;top: 100px;"> 115 </div> 116 117 <script> 118 var roomTimeCurrent = mytime(); 119 var roomTimeLater; 120 121 function mytime(){ 122 123 var a = new Date(); 124 var timeCurrent; 125 var timeLater; 126 var b = a.toLocaleTimeString(); 127 var b_h = a.getHours(); 128 var b_m = a.getMinutes(); 129 // var c = a.toLocaleDateString(); 130 var c_y = a.getFullYear(); 131 var c_m = a.getMonth() + 1; 132 var c_d = a.getDate(); 133 var c_w = a.getDay(); 134 var arr_w = new Array("SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"); 135 var arr_m = new Array("01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"); 136 var d = a.getDay(); 137 var t_midday; 138 var aDate = c_d + 5; 139 var timeLater = a.setDate(a.getDate() + 5); 140 var timeYear = a.getFullYear(); 141 var timeMonth = a.getMonth()+1; 142 var timeDate = a.getDate(); 143 144 if(c_m<10) 145 { 146 c_m = "0" + c_m; 147 } 148 if(c_d<10) 149 { 150 c_d = "0" + c_d; 151 } 152 if(b_h<10) 153 { 154 b_h = "0" + b_h; 155 } 156 if(b_m<10) 157 { 158 b_m = "0" + b_m; 159 } 160 if(b_h<12) 161 { 162 t_midday = "AM"; 163 } 164 else 165 { 166 t_midday = "PM"; 167 } 168 document.getElementById("date").innerHTML = c_y + "-" + c_m + "-" + c_d + " " + arr_w[c_w]; 169 document.getElementById("time").innerHTML = b_h+":"+b_m; 170 document.getElementById("midday").innerHTML = t_midday; 171 if(timeMonth<10) 172 { 173 timeMonth = "0" + timeMonth; 174 } 175 if(timeDate<10) 176 { 177 timeDate = "0" + timeDate; 178 } 179 timeCurrent = c_y + "-" + c_m + "-" + c_d + " " + "00:00:00"; 180 roomTimeLater = timeYear + "-" + timeMonth + "-" + timeDate + " " + "00:00:00"; 181 return timeCurrent; 182 } 183 184 console.log(roomTimeCurrent); 185 console.log(roomTimeLater); 186 // 获取首页存储在浏览器的JSON字符串并将其转换为JSON对象 187 var room = JSON.parse(localStorage.getItem("SelectRoom")); 188 189 document.getElementById("roomName").innerHTML = room.roomName; 190 191 /// 调接口,传参 192 getAjax('get','https://api.consineegroup.net:8082/api/meetingRoom/getMeetingRoomInfo?roomId='+room.roomId+'&start='+roomTimeCurrent+'&end='+roomTimeLater+'&unionId=SITNUTeTlFSERhs8nd8MbAiEiE',function(res){ 193 194 var meetingNumber = res.scheduleInformation[0].scheduleItems.length; 195 console.log(meetingNumber); 196 if(meetingNumber>0){ 197 198 var meetingTitle = res.scheduleInformation[0].scheduleItems[0].eventInfo.categories[0].displayName; 199 var timeDate = res.scheduleInformation[0].scheduleItems[0].eventInfo.start.dateTime; 200 var meetingDate = timeDate.substr(5, 5); 201 var weekDay = (new Date(timeDate)).getDay(); 202 var meetingStart = res.scheduleInformation[0].scheduleItems[0].eventInfo.start.dateTime.substr(11, 5); 203 var meetingEnd = res.scheduleInformation[0].scheduleItems[0].eventInfo.end.dateTime.substr(11, 5); 204 var arr_weekDay = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"); 205 var meetingUser = res.scheduleInformation[0].scheduleItems[0].eventInfo.organizer.displayName; 206 var meetingSummary = res.scheduleInformation[0].scheduleItems[0].eventInfo.summary; 207 var meeting = res.scheduleInformation[0].scheduleItems[0].eventInfo.categories[0].displayName; 208 var meetingSummaryHtml = '<text style="color:rgb(255, 255, 255); font-size:40px;position: fixed;left: 60px;top: 100px;">' + meetingTitle + '</text>' 209 document.getElementById("meetingRoom").innerHTML = meetingSummaryHtml; 210 var leftShift = 30+200*i; 211 var leftShift_x = 210+200*i; 212 213 var totalHtml = '<text style="color:rgb(255, 255, 255); font-size:20px;position: fixed;top: 400px;left: ' + 30 + 'px;">' + meetingSummary + '</text>' + 214 '<text style="color:rgb(255, 255, 255); font-size:20px;position: fixed;top: 430px;left: ' + 30 + 'px;">' + meetingDate + ' ' + arr_weekDay[weekDay] + '</text>' + 215 '<text style="color:rgb(255, 255, 255); font-size:30px;position: fixed;top: 460px;left: ' + 30 + 'px;">' + meetingStart + '-' + meetingEnd + '</text>' + 216 '<text style="color:rgb(255, 255, 255); font-size:20px;position: fixed;top: 505px;left: ' + 30 + 'px;">' + meetingUser + ' ' + meetingTitle + '</text>' + 217 '<text style="color:rgb(255, 255, 255); font-size:70px;position: fixed;top: 420px;left: ' + 210 + 'px;">|</text>'; 218 219 for(var i = 1; i<meetingNumber; i++) 220 { 221 console.log(res.scheduleInformation[0].scheduleItems[i]); 222 var meetingTitle = res.scheduleInformation[0].scheduleItems[i].eventInfo.categories[0].displayName; 223 var timeDate = res.scheduleInformation[0].scheduleItems[i].eventInfo.start.dateTime; 224 var meetingDate = timeDate.substr(5, 5); 225 var weekDay = (new Date(timeDate)).getDay(); 226 var meetingStart = res.scheduleInformation[0].scheduleItems[i].eventInfo.start.dateTime.substr(11, 5); 227 var meetingEnd = res.scheduleInformation[0].scheduleItems[i].eventInfo.end.dateTime.substr(11, 5); 228 var arr_weekDay = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"); 229 var meetingUser = res.scheduleInformation[0].scheduleItems[i].eventInfo.organizer.displayName; 230 var meetingSummary = res.scheduleInformation[0].scheduleItems[i].eventInfo.summary; 231 var meeting = res.scheduleInformation[0].scheduleItems[i].eventInfo.categories[0].displayName; 232 var meetingSummaryHtml = '<text style="color:rgb(255, 255, 255); font-size:40px;position: fixed;left: 60px;top: 100px;">' + meetingTitle + '</text>' 233 document.getElementById("meetingRoom").innerHTML = meetingSummaryHtml; 234 var leftShift = 30+200*i; 235 var leftShift_x = 210+200*i; 236 237 var meetingDetailsHtml = '<text style="color:rgb(255, 255, 255); font-size:20px;position: fixed;top: 400px;left: ' + leftShift + 'px;">' + meetingSummary + '</text>' + 238 '<text style="color:rgb(255, 255, 255); font-size:20px;position: fixed;top: 430px;left: ' + leftShift + 'px;">' + meetingDate + ' ' + arr_weekDay[weekDay] + '</text>' + 239 '<text style="color:rgb(255, 255, 255); font-size:30px;position: fixed;top: 460px;left: ' + leftShift + 'px;">' + meetingStart + '-' + meetingEnd + '</text>' + 240 '<text style="color:rgb(255, 255, 255); font-size:20px;position: fixed;top: 505px;left: ' + leftShift + 'px;">' + meetingUser + ' ' + meetingTitle + '</text>' + 241 '<text style="color:rgb(255, 255, 255); font-size:70px;position: fixed;top: 420px;left: ' + leftShift_x + 'px;">|</text>'; 242 totalHtml += meetingDetailsHtml; 243 244 } 245 console.log(totalHtml); 246 document.getElementById("meetingRoomDetails").innerHTML = totalHtml; 247 } 248 else{ 249 document.getElementById("meetingRoom").innerHTML = '<text style="color:rgb(255, 255, 255); font-size:40px;position: fixed;left: 60px;top: 100px;">暂无会议</text>'; 250 } 251 }); 252 function getAjax(method,url,callback){ 253 const xhr = new XMLHttpRequest(); 254 xhr.open(method,url); 255 xhr.send(); 256 // console.log(xhr.readyState); 257 xhr.onreadystatechange = function(){ 258 // console.log(xhr.readyState); 259 if(xhr.readyState === 4 ){ 260 if(xhr.status == 200){ 261 const res = JSON.parse(xhr.response); 262 callback(res.content); 263 } 264 } 265 266 } 267 268 } 269 setInterval(function() {mytime()},1000); 270 </script> 271 272 </body> 273 </html>