choose_device_footer.html 5.76 KB
<!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" type="text/css" href="../../css/aui.css"/>
      <link rel="stylesheet" type="text/css" href="../../css/utils/chooseDevice.css"/>
      <link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
      <style>
          html,
          body{
            background: rgba(0,0,0,0.4);
            width: 100%;
            height: 100%;
          }
      </style>
  </head>
  <body>
    <div style="height:100%;z-index:10;" tapmode onclick="closeSelecter();"></div>
    <div style="bottom: 0;width:100%;position:fixed;background-color: #FFFFFF;z-index:11;height:40%;overflow:auto;">
      <div style="margin-left:15px;margin-right:15px;">
        <div class="imei-selecter-title">选择设备</div>
        <div class="page-line"></div>
        <div class="device-imei-list" id="device_imei_list">
          <div class="imei-list" tapmode onclick="selectImei();">
            <div class="aui-row aui-row-flex">
              <div class="aui-col aui-col-span-1 aui-row-flex-start">
                <div class="imei-dot" id="imei_dot_all"></div>
              </div>
              <div class="aui-col aui-col-span-23 aui-row-flex-start">
                <span class="imei-address" id="imei_device_all">所有设备</span>
              </div>
            </div>
          </div>
          <div class="page-line"></div>


          <!-- <div class="imei-list">
            <div class="aui-row aui-row-flex">
              <div class="aui-col aui-col-span-1 aui-row-flex-start">
                <div class="imei-dot"></div>
              </div>
              <div class="aui-col aui-col-span-23 aui-row-flex-start">
                <span class="imei-address">1657465464634125 创业产业园机房</span>
              </div>
            </div>
          </div>
          <div class="page-line"></div> -->

        </div>
      </div>
    </div>
    <footer></footer>
  </body>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript" src="../../script/common.js"></script>
  <script type="text/javascript" src="../../script/jquery-3.3.1.min.js"></script>  
  <script type="text/javascript">
    var userId;
    var token;
      apiready = function(){
        api.parseTapmode();
        var footer = $api.dom('footer'); // 获取 footer 标签元素
        var footerH = $api.fixTabBar(footer);
        userId = $api.getStorage('userID');
        token = $api.getStorage('userToken');
        // console.log(api.pageParam.page); //控制发送事件到哪个页面
        // console.log(api.pageParam.selected);
        getDeviceList(api.pageParam.selected);
      };

      function getDeviceList(imei) {
        api.showProgress({
            style: 'default',
            animationType: 'fade',
            title: '加载中...',
            text: '',
            modal: true
        });
        //获取列表
        $.ajax({
            url: HOST + '/iot_api/v1/app/bind_list?user_id='+userId,
            type: 'GET',
            dataType: 'json',
            headers: {
                'Content-Type': 'application/json;charset=utf-8',
                'token': token
            },
            complete: function() {
                api.hideProgress();
            },
            success: function(ret) {
              var deviceList = ret.data.list;
              if (deviceList == 0) {
                api.closeFrame();
              }else {
                for (var i = 0; i < deviceList.length; i++) {
                  var deviceListDom = deviceListHtml(deviceList[i]);
                  $api.append($api.byId("device_imei_list"), deviceListDom);
                }
              }
              if (imei == '') {
                $api.addCls($api.byId('imei_dot_all'), 'selected-dot');
                $api.addCls($api.byId('imei_device_all'), 'selected-device');
              }else {
                $api.addCls($api.byId('imei_dot_'+imei), 'selected-dot');
                $api.addCls($api.byId('imei_device_'+imei), 'selected-device');
              }
            },
            error: function() {
              api.toast({msg: ERR_MSG,duration: 2000,location: 'bottom'});
            }
        });

      }

      function selectImei(imei) {
        var sendImei = '';

        var dotDoms = $api.domAll('.imei-dot');
        for (var i = 0; i < dotDoms.length; i++) {
          if ($api.hasCls(dotDoms[i], 'selected-dot')) {
            $api.removeCls(dotDoms[i], 'selected-dot');
          }
        }
        var devDoms = $api.domAll('.imei-address');
        for (var i = 0; i < devDoms.length; i++) {
          if ($api.hasCls(devDoms[i], 'selected-device')) {
            $api.removeCls(devDoms[i], 'selected-device');
          }
        }
        if (!imei) {
          sendImei = 'all';
          $api.addCls($api.byId('imei_dot_all'), 'selected-dot');
          $api.addCls($api.byId('imei_device_all'), 'selected-device');
        }else {
          sendImei = imei;
          var selected_imei_dom_ = $api.byId('imei_device_' + imei);
          var selected_dot_dom_ = $api.byId('imei_dot_' + imei);
          $api.addCls(selected_imei_dom_, 'selected-device');
          $api.addCls(selected_dot_dom_, 'selected-dot');

        }

        api.sendEvent({
            name: 'alarmConditionByImei',
            extra: {
                imei: sendImei,
            }
        });

        closeSelecter();

      }

      function closeSelecter() {
        api.closeFrame();
      }
  </script>
  </html>