choseDevice.html 6.27 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/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>

<body class="equipment-list-view choseDevice-view">
    <div class="aui-content aui-margin-b-15">
        <header class="aui-bar aui-bar-nav" id="header">
          <a class="aui-btn aui-pull-left" tapmode onclick="closeWin()">
              <span class="aui-iconfont aui-icon-left"></span>
          </a>
            <div class="aui-title">选择设备</div>
            <span class="aui-btn aui-pull-right" tapmode onclick="openCanner(false)">添加设备</span>
        </header>
        <ul class="aui-padded-10" id="devicesList">
            <li tapmode="" class="ld-selected" onclick="choseDevice('867352040586585');"><div><label class="tytx-color-b">设备编号:</label><b>867352040586585</b><i class="iconfont iconxuanze"></i></div><p class="aui-ellipsis-1"><img src="../image/dizhi-s.png"><span>上海市 黄浦区 测试设备地址</span></p></li>
        </ul>
    </div>
</body>

</html>
<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 header = $api.byId('header');
fixStatusBar_API(header);
apiready = function() {
    api.setStatusBarStyle({
        style: 'dark',
        color: 'rgba(0,0,0,0)'
    });
    api.parseTapmode();

    api.addEventListener({
        name: 'add_device'
    }, function(ret, err){
        if( ret ){
             showDeviceList();
        }else{
        }
    });
    showDeviceList();
}

var idList = {};
function showDeviceList() {
  console.log('****');
  token = $api.getStorage('userToken');
  var userID = $api.getStorage('userID');
  $.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
    },
      success: function(ret) {
        if (ret) {
          if (ret.code == 0) {
            console.log('****'+ret.data.list.length);
            $api.setStorage('devices', JSON.stringify(ret.data.list));
            var current = $api.getStorage('defaultDevice');
            var devicesStr = $api.getStorage('devices');
            if (!devicesStr || devicesStr == "") {
                api.toast({
                    msg: '暂无设备',
                    duration: 4000,
                    location: 'bottom'
                });
                setTimeout(function() {
                    api.closeWin();
                },
                3000);
                return false;
            }

            var devices = JSON.parse(devicesStr);
            $("#devicesList").empty();
            var devicesHtmlStr = "";
            if (devices && devices.length > 0) {
                for (var i in devices) {
                    var dev = devices[i];
                    idList[dev.imei] = dev.id
                    if(current==dev.imei){
                      devicesHtmlStr += '<li class="ld-selected" tapmode onclick="choseDevice(\'' + dev.imei + '\');">' + '<div><label class="tytx-color-b">设备编号:</label><b>' + dev.imei + '</b><i class="iconfont iconxuanze"></i></div>' + '<p class="aui-ellipsis-1"><img src="../image/dizhi-s.png" /><span>' + dev.province + ' ' + dev.city + ' ' + dev.address + '</span></p>' + '</li>';
                    }else{
                      devicesHtmlStr += '<li tapmode onclick="choseDevice(\'' + dev.imei + '\');">' + '<div><label class="tytx-color-b">设备编号:</label><b>' + dev.imei + '</b></div>' + '<p class="aui-ellipsis-1"><img src="../image/dizhi-s.png" /><span>' + dev.province + ' ' + dev.city + ' ' + dev.address + '</span></p>' + '</li>';
                    }

                }
            }
            $("#devicesList").html(devicesHtmlStr);
          }
        }
      },
      error: function() {
        api.toast({
            msg: '获取设备列表失败',
            duration: 2000,
            location: 'bottom'
        });
      }
    });
}

function choseDevice(imei){
    var current = $api.getStorage('defaultDevice');
    if(imei == current){
      return false;
    }
    api.confirm({
        title: '设备切换确认',
        msg: '是否切换至设备'+imei,
        buttons: ['确定', '取消']
    }, function(ret, err){
        if( ret && ret.buttonIndex == 1){
             //开始切换设备
             var token = $api.getStorage('userToken');
             api.showProgress({
                 style: 'default',
                 animationType: 'fade',
                 title: '正在切换中...',
                 text: '',
                 modal: true
             });
              var choseId = idList[imei];
             $.ajax({
                 url: HOST + '/iot_api/v1/app/set_device_default',
                 type: 'POST',
                 dataType: 'json',
                 headers: {
                     'Content-Type': 'application/json;charset=utf-8',
                     'token': token
                 },
                 data: JSON.stringify({
                     id: choseId
                 }),
                 complete: function() {
                     api.hideProgress();

                 },
                 success: function(ret) {
                     if (ret) {
                         if (ret.code == 0) {
                             api.sendEvent({
                                 name: 'change_device',
                                 extra: {
                                     imei: imei
                                 }
                             });
                             api.closeWin();

                         }
                     }
                 },
                 error: function() {

                 }
             });

        }
    });

}


</script>