<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>下井记录</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" href="../../css/animate.css">
    <link rel="stylesheet" href="../../css/style.css">
    <style>
        body,
        html {
            background: #fff;
        }

        .month_list_info {
            min-width: 110px;
            margin-left: 9.5px;
            float: left;
            flex: 1;
            position: relative;
            display: flex;
            justify-content: space-around;
            align-items: center;
            color: #009FE8;
            border-radius: 10px;
            border: 1px solid rgba(0, 159, 232, 1);
            padding: 8px 5px;
        }

        .month_list_info:first-child {
            width: 220px;
            background: rgba(0, 159, 232, 1);
            border-radius: 10px;
            color: #FFFFFF;
        }

        .month_list_info:first-child {
            margin-left: 0
        }

        .month_info_list li {
            display: flex;
            /*justify-content: space-around;*/
            align-items: center;
            height: 51px;
            border-bottom: solid 1px #F5F5F5;
            background: #fff;
            color: #2980B9
        }

        .month_info_list li:first-child {
            font-size: 14px;
            font-weight: 500;
            color: #232627;
            background: rgba(243, 246, 250, 1);
            border-bottom: none
        }

        .month_info_list li .item {
            width: 25%;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="api_layout">
        <!-- <div id="headerInfo"></div>
        <div id="MonthOnce"></div> -->
        <div id="monthList"></div>
        <!-- <div id="monthInfoList"></div> -->
    </div>
</body>

</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script src="../../script/config.js" charset="utf-8"></script>
<script src="../../script/doT.min.js" charset="utf-8"></script>
<script type="text/template" id="monthInfoView">
    <ul class="month_info_list">
        <li style="position: fixed;top: 0;width: 100%">
            <div class="item">时间</div>
            <div class="item">区域</div>
            <div class="item">位置</div>
            <div class="item">驻留时长</div>
        </li>
        {{ for(var i = 0; i
        < it.length; i++ ) { }} <li>
            <div class="item">
                <div>{{=it[i].time}}</div>
            </div>
            <div class="item">
                <div>{{=it[i].area}}</div>
            </div>
            <div class="item month_info">{{=it[i].station}}</div>
            <div class="item times_info">{{=it[i].slot}}</div>
            </li>
            {{ } }}
    </ul>

</script>

<script type="text/javascript">
    apiready = function() {
        let downtime = api.pageParam.downtime;
        getOnceInfo(downtime,api.pageParam.staff_num)
    }

    function getOnceInfo(downtime,staff_num) {
        $http.requestData(jinfengUrlRouter.getOnceInfo, 'post', {
                downtime: downtime,
                staff_num
            })
            .then(ret => {
                if (ret.code == 0) {
                    $apis.html(monthList, '#monthInfoView', ret.data);
                }
            })
            .catch((err) => {});
    }
</script>
