jifuning
/
yangchangwan


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
							<!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/style.css">
    <style>
        html,body{
            background: #F0F0F0;
        }
        .date-lists{
            width: 100%;
            padding: 10px 0;
            overflow-x: scroll;
            white-space: nowrap;
            box-sizing: border-box;
        }
        .date-lists::-webkit-scrollbar{
          display: none;
        }
        .date-wrap{
            padding: 0 10px;
            background: #F0F0F0;
        }
        .date-lists li{
            margin-right: 10px;
            border: 1px solid #009FE8;
            background: #f0f0f0;
            padding: 4px 10px;
            border-radius: 5px;
            color: #009FE8;
        }
        .date-lists .active{
            background: #009FE8;
            color: #fff;
        }
        /*list*/
        .duty-wrap{
            background: #fff;
        }
        .title-wrap{
            position: relative;
        }
        .title-wrap li{
            width: 70%;
            text-align: center;
            font-size: 14px;
            color: #009FE8;
            padding: 14px 0;
        }
        .title-wrap li:first-child{
            width: 30%;
        }
        .title-wrap:after{
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: #009FE8;
        }
        /*list*/
        .duty-list li{
            font-size: 14px;
            color: #232627;
            padding: 10px 0;
            position: relative;
        }
        .duty-list li:after{
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: #F0F0F0;
        }
        .duty-list .date-week{
            width: 35%;
            text-align: center;
        }
        .duty-list .duty-personal{
            width: 65%;
            padding:0 15px 0 10px;
            line-height: 1.7;
        }
        .date-week span{
            color: #6C6F74;
            margin-top: 3px;
            display: block;
        }
    </style>
</head>
<body>
    <div class="api_layout">
        <div class="date-wrap">
           <ul class="date-lists flex-start" id="date_list">

           </ul>
        </div>
<!--        list-->
        <div class="duty-wrap" id="all_duty">

        </div>
    </div>
</body>
</html>
<script type="text/template" id="monthTemplate">
    {{~it:value:index}}
        {{?index == 0}}
          <li class="active" onclick="randomSwitchBtn(this,'{{=value}}')">{{=value}}</li>
        {{??}}
          <li onclick="randomSwitchBtn(this,'{{=value}}')">{{=value}}</li>
        {{?}}
    {{~}}
</script>
<script type="text/template" id="allTemplate">
  <div class="duty-title">
      <ul class="flex-start title-wrap">
          <li>时间</li>
          <li>值班人</li>
      </ul>
  </div>
  <ul class="duty-list">
      {{~it:value:index}}
        <li class="flex-start">
            <div class="date-week">
                <label>{{=value.date}}</label>
                <span>{{=value.week}}</span>
            </div>
            <p class="duty-personal">{{=value.content}}</p>
        </li>
      {{~}}
  </ul>
</script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/doT.min.js"></script>
<script src="../../script/config.js" charset="utf-8"></script>
<script type="text/javascript">
  apiready = function () {
        var info = $api.getStorage('data'),
        username = JSON.parse(info).data.user.name;
        getDutyDate(username)
  };
  function getDutyDate(name) {
    $http.fnReuestDataNologing(UrlRouter.getAllmonth,'','get',{name:name},function (ret, err) {
      if (ret.code === 0) {
        $apis.html(date_list,'#monthTemplate',ret.data);
        getDutyList(ret.data[0])
      }
    })
  }

  function getDutyList(month) {
    api.showProgress({
      title: '',
      text: '加载中...',
      modal: true
    });
    $http.fnReuestDataNologing(UrlRouter.getDutyAlllist,'','post',{month:month},function (ret, err) {
      $apis.html(all_duty,'#allTemplate',ret.data);
      api.hideProgress()
    })
  }
  // 点击日期
  function randomSwitchBtn( tag ,month) {
      if( tag == $api.dom('.date-lists li.active') )return;
      var eFootLis = $api.domAll('.date-lists li');
      index = 0;
      for (var i = 0,len = eFootLis.length; i < len; i++) {
          if( tag == eFootLis[i] ){
              index = i;
          }else{
              $api.removeCls(eFootLis[i], 'active');
          }
      }
      $api.addCls( eFootLis[index], 'active');
      getDutyList(month)
  }

</script>