deviceDetails_frm.html 7.56 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"/>
      <title>设备信息_frm</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/deviceDetails/deviceDetails.css"/>
      <style>
          html,
          body{
            background-color: #F4F6F9;
          }
      </style>
  </head>
  <body>
    <div class="device-title">
      <div style="margin-left:15px;margin-right:15.5px;">
        <div class="aui-row aui-row-flex top-14">
          <div class="aui-col aui-col-span-1" style="margin-top: 1rem;">
            <div class="title-sign"></div>
          </div>
          <div class="aui-col aui-col-span-15">
            <span class="device-name" id="device_imei">设备编号:000000000000000</span>
          </div>
          <div class="aui-col aui-col-span-8 aui-row-flex-end">
          </div>
        </div>
      </div>
    </div>
    <div class="info-panel">
      <div class="info-inside-panel">
        <div class="aui-row aui-row-flex padding-top-21">
          <div class="aui-col aui-col-span-8 aui-row-flex-start">
            <span class="device-obj" style="font-weight:bold;color:rgba(129,130,149,1);">设备终端信息</span>
          </div>
          <div class="aui-col aui-col-span-16 aui-row-flex-end">
            <span class="num-value" style="font-size:12px;font-weight:500;color:rgba(129,130,149,1);" id="update_time"></span>
          </div>
        </div>
        <div class="panel-line margin-top-21" style="background:rgba(217,229,255,1);"></div>
        <div class="aui-row aui-row-flex margin-top-21">
          <div class="aui-col aui-col-span-3 aui-row-flex-start">
            <img src="../../image/deviceDetails/macInfo-icon-1.png" style="width:22px;height:22px;" />
          </div>
          <div class="aui-col aui-col-span-10 aui-row-flex-start">
            <span class="device-obj">设备状态</span>
          </div>
          <div class="aui-col aui-col-span-11 aui-row-flex-end chooseStatus1">
            <img src="../../image/deviceDetails/icon-red.png"  style="width:12px;height:12px;margin-top: 0.25rem;"/>
            <span class="num-value" id="status1">在线</span>

          </div>
        </div>
        <div class="panel-line margin-top-21"></div>
        <div class="aui-row aui-row-flex margin-top-21">
          <div class="aui-col aui-col-span-3 aui-row-flex-start">
            <img src="../../image/deviceDetails/macInfo-icon-2.png" style="width:22px;height:22px;" />
          </div>
          <div class="aui-col aui-col-span-10 aui-row-flex-start">
            <span class="device-obj">开关状态</span>
          </div>
          <div class="aui-col aui-col-span-11 aui-row-flex-end chooseStatus2">
            <img src="../../image/deviceDetails/icon-red.png" style="width:12px;height:12px;margin-top: 0.25rem;"/>
            <span class="num-value" id="status2">合闸</span>
          </div>
        </div>
        <div class="panel-line margin-top-21"></div>
        <div class="aui-row aui-row-flex margin-top-21">
          <div class="aui-col aui-col-span-3 aui-row-flex-start">
            <img src="../../image/deviceDetails/macInfo-icon-3.png" style="width:22px;height:22px;" />
          </div>
          <div class="aui-col aui-col-span-10 aui-row-flex-start">
            <span class="device-obj">设备位置</span>
          </div>
          <div class="aui-col aui-col-span-11 aui-row-flex-end">
            <span class="num-value" style="color:rgba(55,57,78,1);" id="device_position"></span>
          </div>
        </div>
        <div class="panel-line margin-top-21"></div>
        <div class="aui-row aui-row-flex margin-top-21">
          <div class="aui-col aui-col-span-3 aui-row-flex-start">
            <img src="../../image/deviceDetails/macInfo-icon-4.png" style="width:22px;height:22px;" />
          </div>
          <div class="aui-col aui-col-span-10 aui-row-flex-start">
            <span class="device-obj">设备名称</span>
          </div>
          <div class="aui-col aui-col-span-11 aui-row-flex-end">
            <span class="num-value" style="color:rgba(55,57,78,1);" id="device_name"></span>
          </div>
        </div>
        <div class="panel-line margin-top-21"></div>
      </div>
    </div>
  </body>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript" src="../../script/common.js"></script>
  <script type="text/javascript">
    var defaultImei;
    var token;
    var userId;
      apiready = function(){
        api.parseTapmode();
        defaultImei = $api.getStorage('defaultDevice');
        token = $api.getStorage('userToken');
        userId = $api.getStorage('userID');
        $api.html($api.byId("device_imei"), '设备编号:'+ defaultImei);
        /** 下拉刷新 */
        api.setRefreshHeaderInfo({
            loadingImg:'',
            bgColor: '#5B7FF8',
            textColor: '#000',
            textDown: '刷新设备信息...',
            textUp: '松开刷新...'
        }, function(ret, err) {
          getDeviceInfo();
        });
        getDeviceInfo();
      };
    function getDeviceInfo() {
      //当前单个设备的所有信息
      api.ajax({
        url: HOST + '/iot_api/v1/app/device?imei='+defaultImei,
        method: 'GET',
        headers: {
          'Content-Type': 'application/json;charset=utf-8',
          'token': token
        },
      }, function(ret, err) {
        api.refreshHeaderLoadDone();
        if (ret.code == 0) {
          var info = ret.data.device;
          var choose1Doms = $api.domAll('.chooseStatus1');
          var status1Span = $api.byId('status1');
          var choose2Doms = $api.domAll('.chooseStatus2');
          var status2Span = $api.byId('status2');
          if (info.online) {
            for (var j = 0; j < choose1Doms.length; j++) {
              ((choose1Doms[j].childNodes)[1]).src = '../../image/deviceDetails/icon-green.png';
            }
            status1Span.style.color = '#70C248';
            $api.html(status1Span, '在线');
          }else {
            for (var j = 0; j < choose1Doms.length; j++) {
              ((choose1Doms[j].childNodes)[1]).src = '../../image/deviceDetails/icon-red.png';
            }
            status1Span.style.color = '#FA5251';
            $api.html(status1Span, '离线');
          }
          if (info.gate_status != '1') {
            for (var j = 0; j < choose2Doms.length; j++) {
              ((choose2Doms[j].childNodes)[1]).src = '../../image/deviceDetails/icon-green.png';
            }
            status2Span.style.color = '#70C248';
            $api.html(status2Span, '分闸');
          }else {
            for (var j = 0; j < choose2Doms.length; j++) {
              ((choose2Doms[j].childNodes)[1]).src = '../../image/deviceDetails/icon-red.png';
            }
            status2Span.style.color = '#FA5251';
            $api.html(status2Span, '合闸');
          }

          $api.html($api.byId("update_time"), parseTime(info.updatedAt,'{y}-{m}-{d} {h}:{i}:{s}')+' 更新');
          if (info.position && info.position != null) {
            $api.html($api.byId("device_position"), info.position);
          }
          if (info.name && info.name != null) {
            $api.html($api.byId("device_name"), info.name);
          }
        }else {
          api.toast({msg: '参数请求失败',duration: 2000,location: 'bottom'});
        }
      });
    }
  </script>
  </html>