|
|
|
|
<!DOCTYPE HTML>
|
<html xmlns:th="http://www.thymeleaf.org" xmlns:matrix="http://www.w3.org/1999/xhtml">
|
<head>
|
<meta charset="utf-8">
|
<META HTTP-EQUIV="Pragma" CONTENT="box_no-cache">
|
<meta name="renderer" content="webkit|ie-comp|ie-stand">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport"
|
content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=box_no" />
|
<meta http-equiv="Cache-Control" content="box_no-siteapp" />
|
<LINK rel="Bookmark" href="../images/favicon.ico">
|
<!-- 本框架基本脚本和样式 -->
|
<script type="text/javascript"
|
th:src="@{/js/plugin/jquery-2.1.4.min.js}"></script>
|
<script type="text/javascript"
|
th:src="@{/js/systools/MBase.js}"></script>
|
<style type="text/css">
|
|
/* 代表服务已结束 */
|
.box_danger {
|
background: #d9534f;
|
cursor: pointer;
|
}
|
|
/* 代表上班未被预约还可再约位的空档 */
|
.box_success {
|
background: #5cb85c;
|
}
|
/* 代表已预约 */
|
.box_warning {
|
background: #f0ad4e;
|
cursor: pointer;
|
}
|
/* 代表正在服务中 */
|
.box_primary {
|
background: #337ab7;
|
cursor: pointer;
|
}
|
|
/* 代表不上班 */
|
.box_no {
|
background: #efefef;
|
}
|
|
.exp-warp {
|
margin-left: 20px;
|
height: 50px;
|
width: 100px;
|
float: left;
|
}
|
|
.exp-box {
|
width: 100px;
|
height: 30px;
|
float: left;
|
border-radius: 5px;
|
}
|
|
.exp-title {
|
width: 100px;
|
height: 20px;
|
width: 100px;
|
line-height: 20px;
|
text-align: center;
|
}
|
|
.box-table {
|
|
}
|
|
.box-table th {
|
border: 1px solid;
|
}
|
|
.box-table td {
|
border: 1px solid;
|
}
|
|
.table-box {
|
height: 500px;
|
overflow-x: hidden;
|
overflow-y: auto;
|
margin-bottom: 20px;
|
}
|
|
.adbox {
|
position: absolute;
|
top: 0px;
|
left: 0px;
|
border: 1px solid #aeaeae;
|
width: 200px;
|
height: 100px;
|
background: white;
|
padding: 10px;
|
}
|
#mgrid>thead{
|
display: table-footer-group;
|
}
|
|
|
</style>
|
|
<title></title>
|
</head>
|
<div class="ibox-content">
|
|
<table class="box-table" id="mgridThead">
|
<thead>
|
<tr>
|
<th>时 间</th>
|
<th:block th:each="item:${bedList }" >
|
<th th:text="${item.bedName }"></th>
|
</th:block>
|
</tr>
|
</thead>
|
</table>
|
<div class=" table-box ">
|
<table class="box-table" id="mgrid">
|
<thead>
|
<tr>
|
<th>时 间</th>
|
<th:block th:each="item:${bedList }" >
|
<th th:text="${item.bedName }"></th>
|
</th:block>
|
</tr>
|
</thead>
|
<tbody>
|
<th:block th:each="item,counter:${timePark }" >
|
<tr>
|
<td th:text="${#dates.format(item, 'HH:mm')}" >
|
</td>
|
|
<th:block th:each="td,counter:${chart[counter.index] }" >
|
<td th:if="td.msg ne null" th:class="${td.css }+ 'msg'" th:msg="${td.msg}"></td>
|
<td th:if=" td.msg eq null" th:class="${td.css }"></td>
|
</th:block>
|
</tr>
|
</th:block>
|
</tbody>
|
</table>
|
</div>
|
<div class="row">
|
<div class="exp-warp">
|
<div class="exp-box box_success"></div>
|
<div class="exp-title">可预约</div>
|
</div>
|
<div class="exp-warp">
|
<div class="exp-box box_warning"></div>
|
<div class="exp-title">已预约</div>
|
</div>
|
<div class="exp-warp">
|
<div class="exp-box box_primary"></div>
|
<div class="exp-title">服务中</div>
|
</div>
|
<div class="exp-warp">
|
<div class="exp-box box_danger"></div>
|
<div class="exp-title">服务结束</div>
|
</div>
|
|
</div>
|
|
|
</div>
|
|
<div id="ad" class="adbox" style="display: none"></div>
|
|
|
<script type="text/javascript" th:src="@{/js/systools/MJsBase.js}"></script><script type="text/javascript">
|
$(function() {
|
$(".msg").mouseenter(function(event) {
|
var adNode = $("#ad");
|
adNode.html($(this).attr("msg"));
|
adNode.css("left", event.pageX + 10 + "px");
|
adNode.css("top", event.pageY + 10 + "px");
|
adNode.show();
|
});
|
$(".msg").mouseleave(function(event) {
|
$("#ad").hide();
|
});
|
})
|
</script>
|
</body>
|
</html>
|
