yf_zd
/
yfwlwCut


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
							{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link href="{% static '/lib/bootstrap-3.3.7/css/bootstrap.css' %}" rel="stylesheet">
  <link rel="stylesheet" href="{% static '/lib/font-awesome/4.5.0/css/font-awesome.css' %}">
  <link rel="stylesheet" href="{% static '/lib/css/ace.min.css' %}" />
  <link rel="stylesheet" href="{% static '/lib/css/ace-skins.min.css' %}">
  <link rel="stylesheet" href="{% static '/lib/css/ace-rtl.min.css' %}">
  <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
  <link rel="stylesheet" href="{% static '/lib/css/jquery-ui.css' %}" />
  <link rel="stylesheet" href="{% static '/css/equipmanage_cbd.css' %}" />
  <style>
    #listPage {
      overflow-x: scroll;
    }

    .searchCover {
      margin: 20px 0;
    }

    .innerTable {
      padding: 0 1px 0 0;
      min-width: 750px;
    }

    .table,
    .table.table-striped>thead>tr>th {
      text-align: center;
    }

    table td {
      vertical-align: middle !important;
    }

    .nullData {
      width: 100%;
      height: 500px;
      background: #ddd;
      text-align: center;
      line-height: 500px;
      font-size: 20px;
      border: 1px solid #ddd;
    }

    /* 配置项 */

    .form-group>label {
      margin: 4px 0 0 0;
      text-align: right;
    }

    .initVal {
      position: absolute;
      left: 14px;
      top: 5px;
    }

    .ui-slider {
      top: 8px;
      left: 18px;
    }

    .sliderVal {
      position: absolute;
      right: 30px;
      top: 5px;
    }

    .collocateBtn {
      text-align: center;
    }

    .collocateBtn button {
      margin: 10px 10px 20px 10px;
    }

    .form-group select {
      width: 200px;
    }

    .widget-body {
      margin-top: 20px;
    }

    .timePattern {
      display: none;
    }

    .hintTitle {
      text-align: center;
      display: inline-block;
      width: 100px;
      margin-right: 15px;
      color: #777;
    }

    .form-group select[name='begin'],
    .form-group select[name='end'] {
      padding: 0 26px 0 37px;
      width: initial;
    }

    #desc {
      width: 100px;
    }
  </style>

  <body>
    <div class="content">
      <div id="detialPage"></div>
      <div id="listPage">
        <div class="searchCover">
          设备ID：
          <input type="text" value="" id="eId" placeholder="请输入设备ID" onkeypress="if (event.keyCode == 13) sub_filter();" /> SIM卡状态：
          <select name="" id="status">
            <option value="">请选择</option>
            <option value="1">测试期</option>
            <option value="2">沉默期</option>
            <option value="3">使用中</option>
            <option value="4">停机</option>
            <option value="5">停机保号</option>
            <option value="6">预销号</option>
            <option value="7">销号</option>
            <option value="0">未知</option>
          </select>
          <!-- <input type="text" value="" class="fp-user" id="edver" placeholder="请输入设备版本" onkeypress="if (event.keyCode == 13) sub_filter();" /> -->
          <button type="button" onclick="sub_filter()" class="btn btn-sm btn-primary">筛选</button>
        </div>
        <div class="innerTable">
          <table id="datatable" class="table table-striped table-hover">
            <thead>
              <tr>
                <th>设备ID</th>
                <th>设备名称</th>
                <th>设备类型</th>
                <th>SIM卡状态</th>
                <th>套餐（Mb）</th>
                <th>剩余流量（Mb）</th>
                <th>到期时间</th>
                <th>绑定手机号</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>

            </tbody>
          </table>
          <div class="fenpei-bottom">
            <input type="hidden" id="totalPage" value={{ nums }}>
            <div id="page" style="text-align: center;"></div>
          </div>
        </div>
      </div>

    </div>

    <script src="{% static '/lib/js/jquery-2.1.4.min.js' %}"></script>
    <script src="{% static '/lib/bootstrap-3.3.7/js/bootstrap.js' %}"></script>
    <script src="{% static '/lib/layui/layui.all.js' %}"></script>
    <script src="{% static '/js/common.js' %}?versions=0.5.0"></script>
    <!-- <script src="{% static '/js/warnmanage/cbd_list.js' %}?versions=0.5.0"></script> -->
    <script>    
      $.ajaxSetup({
        data: { csrfmiddlewaretoken: '{{ csrf_token }}' },
      });
    </script>
    <script>
      $('#eId').on('focus', function () {
        $('#status').val('');
      })
      $('#status').on('change', function () {
        $('#eId').val('');
      })
      getData(1, 1, '', '', '')
      function getData(page, currpage, e_id, status) {
        $.ajax({
          type: 'get',
          url: 'sim_flow_view',
          data: {
            'page': page,
            'e_id': e_id,
            'status': status
          },
          dataType: "html",
          beforeSend: function () {
            $('#loadingParent').show();
          },
          complete: function () {
            $('#loadingParent').hide();
          },
          success: function (data) {
            $('#datatable').children().eq(1).html(data);
            scrollBar();
            layui.use('laypage', function () {
              var laypage = layui.laypage;
              laypage.render({
                elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
                // ,count: 30
                , curr: currpage
                , count: $('#total_nums').val()
                , theme: '#428BCA'
                , layout: ['prev', 'page', 'next', 'skip']
                , jump: function (obj, first) {
                  if (!first) {
                    $("#datatable  tr:not(:first)").html("");
                    getData(obj.curr, obj.curr, e_id, status);
                  }
                }
              });
            });
          },
          error: function (type) {
            console.log(type)
          }
        })
      }
      //筛选：
      function sub_filter() {
        getData(1, 1, $('#eId').val(), $('#status').val())
      }

    </script>
  </body>

</html>