<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>喷涂上线看板</title> <script src="../Scripts/jquery-1.8.0.min.js"></script> <style> body { margin: 0; } .centerT, .centerT tr, .centerT td { border-bottom: solid 1px white; border-left: solid 1px white; border-right: solid 1px white; border-collapse: collapse; } .title { color: white; font-family: 黑体; font-size: 36px; font-weight: 700; width: 200px; height: 50px; text-align: center; background-color: blue; } .title1 { color: white; font-family: 黑体; font-size: 36px; font-weight: 700; width: 880px; height: 50px; text-align: center; background-color: blue; } .content { color: white; font-family: 黑体; font-size: 24px; width: 150px; height: 50px; line-height: 80px; text-align: center; } .content1 { color: white; font-family: 黑体; font-size: 24px; width: 880px; height: 50px; line-height: 80px; text-align: center; } .large_width { width: 255px; } .min_width { width: 150px; } </style> <script> $(function () { getTable(); }); function getDate() { var today = new Date(); $("#DivTimer").text(today.Format("yyyy-MM-dd hh:mm:ss")); } // 对Date的扩展,将 Date 转化为指定格式的String // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符, // 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字) // 例子: // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 // (new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18 Date.prototype.Format = function (fmt) { //author: meizz var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 "m+": this.getMinutes(), //分 "s+": this.getSeconds(), //秒 "q+": Math.floor((this.getMonth() + 3) / 3), //季度 "S": this.getMilliseconds() //毫秒 }; if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); for (var k in o) if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); return fmt; } function getTable() { $.ajax({ type: "GET", url: "../Handler/Handler1.ashx?method=GetTableContent", dataType: "json", success: function (result) { var res = result["result"]; for (var i = 0; i < res.length; i++) { if (i % 2 == 0) { $("td[name='contentLO" + (i + 1) + "']").text(res[i].col1); $("td[name='contentLI" + (i + 1) + "']").text(res[i].col2); $("td[name='contentLP" + (i + 1) + "']").text(res[i].col3); } else { $("td[name='contentRO" + (Math.floor(i / 2) + 1) + "']").text(res[i].col1); $("td[name='contentRI" + (Math.floor(i / 2) + 1) + "']").text(res[i].col2); $("td[name='contentRP" + (Math.floor(i / 2) + 1) + "']").text(res[i].col3); } } } }) } </script> </head> <body> <div id="div1" style="background-color: black; width: 100%; height: 100%; float: left;"> <table style="width: 100%; height: 100%"> <tr> <td style="height:120px;width: 100%;display: flex;"> <div style="background:url('../Pic/Logo_New.png') no-repeat center; background-size: 180px 107px; width:187px; height:120px; display:inline-block; float:left;"></div> <div style="color:white;display:inline-block; height: 122px;line-height: 119px; text-align:center; font-size:100px; flex: 1;">装配生产信息</div> <div id="DivTimer" style="display:inline-block; color:white; font-size:50px; text-align:center; width:550px; line-height:120px; float:left;"></div> </td> </tr> <tr> <td style="float: left; width: 49.5%;height: 100%"> <div id="div2" style="width: 100%; height: 100%"> <table class="centerT"> <tr><td class="title">零件名称</td><td class="title">颜色</td><td class="title">数量</td></tr> <tr><td name="contentLO1" class="content1"></td><td name="contentLI1" class="content"></td><td name="contentLP1" class="content"></td></tr> <tr><td name="contentLO2" class="content1"></td><td name="contentLI2" class="content"></td><td name="contentLP2" class="content"></td></tr> <tr><td name="contentLO3" class="content1"></td><td name="contentLI3" class="content"></td><td name="contentLP3" class="content"></td></tr> <tr><td name="contentLO4" class="content1"></td><td name="contentLI4" class="content"></td><td name="contentLP4" class="content"></td></tr> <tr><td name="contentLO5" class="content1"></td><td name="contentLI5" class="content"></td><td name="contentLP5" class="content"></td></tr> </table> </div> </td> <td style="float: right; width: 49.5%;height: 100%"> <div id="div3" style="width: 100%; height: 100%"> <table class="centerT"> <tr><td class="title">零件名称</td><td class="title">颜色</td><td class="title">数量</td></tr> <tr><td name="contentRO1" class="content1"></td><td name="contentRI1" class="content"></td><td name="contentRP1" class="content"></td></tr> <tr><td name="contentRO2" class="content1"></td><td name="contentRI2" class="content"></td><td name="contentRP2" class="content"></td></tr> <tr><td name="contentRO3" class="content1"></td><td name="contentRI3" class="content"></td><td name="contentRP3" class="content"></td></tr> <tr><td name="contentRO4" class="content1"></td><td name="contentRI4" class="content"></td><td name="contentRP4" class="content"></td></tr> <tr><td name="contentRO5" class="content1"></td><td name="contentRI5" class="content"></td><td name="contentRP5" class="content"></td></tr> </table> </div> </td> </tr> </table> </div> </body> </html>