| 
  
 | 
  
 | 
  
 | 
  
 | 
<!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}"> 
 | 
<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 class="am-active"><a 
 | 
                        th:href="@{/admin/occupancy/showCwzyList}">床位占用</a></li> 
 | 
                    <li><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> 
 | 
  
 | 
  
 | 
  
 | 
        <div class="warptable"> 
 | 
            <table class="box-table "  id="mgridThead"> 
 | 
                <thead style="display: table-footer-group;"> 
 | 
                    <tr class="am-primary"> 
 | 
                        <th>时   间</th> 
 | 
                            <th th:each="item:${bedList }"  ><span th:text="${item.bedName }"></span></th> 
 | 
                    </tr> 
 | 
                </thead> 
 | 
                <tbody> 
 | 
  
 | 
                    <tr th:each="item,counter:${timePark }" > 
 | 
                        <td th:text="${#dates.format(item,'HH:mm')}" 
 | 
                        </td  > 
 | 
                            <td th:each="td,counter:${chart[counter.index] }"  th:class="${td.css }+ ' msg'" th:msg="${td.msg}"> 
 | 
                                <span th:if="${  td.msg ne null }" th:class="${td.css }+ ' msg'" th:msg="${td.msg}"></span> 
 | 
                                <span th:if="${  td.msg eq null}" th:class="${td.css }  "  ></span> 
 | 
                            </td> 
 | 
                    </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> 
 | 
    <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/showCwzyList?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/showCwzyList?timeStr=" 
 | 
                                + time); 
 | 
            } 
 | 
        } 
 | 
    </script> 
 | 
</body> 
 | 
</html> 
 |