|
|
|
|
<!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="X-UA-Compatible" content="IE=edge">
|
|
<meta
|
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
|
name="viewport" />
|
<title th:text="${session.userInfo.shopName }"></title>
|
|
<!-- Set render engine for 360 browser -->
|
<meta name="renderer" content="webkit">
|
|
<!-- No Baidu Siteapp-->
|
<meta http-equiv="Cache-Control" content="no-siteapp" />
|
|
|
|
<!-- Add to homescreen for Chrome on Android -->
|
<meta name="mobile-web-app-capable" content="yes">
|
|
|
<!-- Add to homescreen for Safari on iOS -->
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
<meta name="apple-mobile-web-app-title" content="Amaze UI" />
|
|
|
<!-- Tile icon for Win8 (144x144 + tile color) -->
|
|
<meta name="msapplication-TileColor" content="#0e90d2">
|
<script type="text/javascript"
|
th:src="@{/js/plugin/jquery-2.1.4.min.js}"></script>
|
<script type="text/javascript"
|
th:src="@{/js/systools/DDMBase.js}"></script>
|
<link rel="stylesheet"
|
th:href="@{/plugin/amazingUI/css/amazeui.min.css}">
|
<link rel="stylesheet"
|
th:href="@{/plugin/amazingUI/css/app.css}">
|
<link rel="stylesheet" type="text/css"
|
th:href="@{/css/dingPersonalAchieveReport.css}">
|
<link rel="stylesheet" type="text/css"
|
href= basePath+"/css/common-style.css">
|
<style>
|
.table-box{
|
width:initial;
|
overflow-y: scroll;
|
overflow-x: inherit;
|
}
|
.warptable{
|
width:initial;
|
overflow-y: scroll;
|
overflow-x: inherit;
|
}
|
</style>
|
</head>
|
<body>
|
<!-- 个人业绩 -->
|
<!-- 头部开始 -->
|
|
<header data-am-widget="header"
|
class="am-header color-w back-m1 am-header-fixed">
|
<div class="am-header-left am-header-nav">
|
<a th:href="@{/admin/redirect/hive/mobile/personal?foot=1}" class=""> <i
|
class="am-header-icon am-icon-chevron-left"></i>
|
</a>
|
</div>
|
<h1 class="am-header-title">
|
<a href="#title-link" class=""> 美疗师占用</a>
|
</h1>
|
<div class="am-header-right am-header-nav">
|
<div class="am-dropdown" data-am-dropdown>
|
<button class="am-btn am-dropdown-toggle am-btn-secondary"
|
data-am-dropdown-toggle>
|
|
<i class="am-header-icon am-icon-bars"></i>
|
</button>
|
<ul class="am-dropdown-content">
|
<li><a th:href="@{/admin/occupancy/showCwzyList}">床位占用</a></li>
|
<li class="am-active"><a
|
th:href="@{/admin/occupancy/editMlsForm}">美疗师占用</a></li>
|
</ul>
|
|
</div>
|
</div>
|
</header>
|
<!-- 头部结束 -->
|
<div class="report ">
|
<div class="am-g">
|
<a href="##" class="am-u-sm-2 center" onclick="last()"><i
|
class="am-icon-arrow-circle-left am-icon-fw"></i></a> <input autocomplete="off" type="date"
|
class="choice-time am-u-sm-8 " id="date" th:value="${timeStr}">
|
<a class="am-u-sm-2 center" onclick="next()"><i
|
class="am-icon-arrow-circle-right am-icon-fw"></i></a>
|
</div>
|
</div>
|
|
<div class="table-box">
|
<table th:if="${mlsList eq null && timePark eq null}" class="box-table">
|
<thead style="display: table-footer-group;">
|
<tr class="am-primary">
|
<th align="center">门店暂无排班情况</th>
|
</tr>
|
</thead>
|
</table>
|
|
|
<table th:if="${mlsList ne null && timePark ne null}" class="box-table" id="mgridThead">
|
<thead>
|
<tr class="am-primary">
|
<th>时 间</th>
|
<th th:each="item:${mlsList }" >
|
<span th:text="${item.staffName }"></span>
|
</th>
|
</tr>
|
</thead>
|
</table>
|
<div class="warptable">
|
<table class="box-table">
|
<thead style="display: table-footer-group;">
|
<tr class="am-primary">
|
<th>时 间</th>
|
<th th:each="item:${mlsList }" >
|
<span th:text="${item.staffName }"></span>
|
</th>
|
</tr>
|
</thead>
|
<tbody>
|
|
<tr th:each="item,counter:${timePark }" >
|
<td th:text="${#dates.format(item, 'HH:mm')}" >
|
</td>
|
<th:block th:each="td:${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>
|
|
</tbody>
|
</table>
|
</div>
|
|
</div>
|
<div>
|
<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 class="exp-warp">
|
<div class="exp-box box_no"></div>
|
<div class="exp-title">未上班</div>
|
</div>
|
|
</div>
|
|
|
<div id="ad" class="adbox" style="display: none"></div>
|
|
|
<script type="text/javascript">
|
$(function() {
|
/*修改表格宽度*/
|
var o = document.getElementById("mgridThead");
|
/*scrollWidth取得真实宽度,不包括滚动条,但是可以取得被隐藏的宽度*/
|
var h = o.scrollWidth;
|
console.log(h);
|
console.log('aaa')
|
$(".warptable").css('width',h);
|
/*事件*/
|
$(".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();
|
});
|
});
|
|
function next() {
|
var myDate = new Date();
|
var ndate = $("#date").val();
|
console.log(ndate);
|
var newms = Date.parse(ndate);
|
var msdate = newms + (60 * 60 * 24 * 1000);
|
|
myDate.setTime(msdate);
|
|
var mon = myDate.getMonth() + 1;
|
var da = myDate.getDate();
|
if (myDate.getMonth() + 1 < 10) {
|
mon = "0" + (myDate.getMonth() + 1);
|
}
|
if (myDate.getDate() < 10) {
|
da = "0" + myDate.getDate();
|
}
|
var date2 = myDate.getFullYear() + "-" + mon + "-" + da;
|
$("#date").val(date2);
|
var time = $("#date").val();
|
if (time != '') {
|
MTools.redirect( basePath+"/admin/occupancy/editMlsForm?timeStr="
|
+ time);
|
}
|
}
|
function last() {
|
var myDate = new Date();
|
var ndate = $("#date").val();
|
var newms = Date.parse(ndate);
|
var msdate = newms - (60 * 60 * 24 * 1000);
|
myDate.setTime(msdate);
|
var mon = myDate.getMonth() + 1;
|
var da = myDate.getDate();
|
if (myDate.getMonth() + 1 < 10) {
|
mon = "0" + (myDate.getMonth() + 1);
|
}
|
if (myDate.getDate() < 10) {
|
da = "0" + myDate.getDate();
|
}
|
var date2 = myDate.getFullYear() + "-" + mon + "-" + da;
|
$("#date").val(date2);
|
var time = $("#date").val();
|
if (time != '') {
|
MTools.redirect( basePath+"/admin/occupancy/editMlsForm?timeStr="
|
+ time);
|
}
|
}
|
</script>
|
</body>
|
</html>
|
