paramController_frm.html 15.2 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/paramSet/paramSet.css"/>
      <style>
        html,
        body{
          background-color: #F4F6F9;
        }
      </style>

  </head>
  <body>
    <div class="param-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 id="show_logs"  class="show-logs" tapmode onclick="showLogs();">查看日志</div>  <!--not-click-->
          </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-17 aui-row-flex-start">
           <span class="param-obj">过载电流动作值</span><span class="param-obj-extra aui-hide" style="margin-left:0.3rem;" >(<span id="gzdl_range"></span > A)</span>
         </div>
         <div class="aui-col aui-col-span-5 aui-row-flex-end">
           <input id="gzdl" class="aui-input param-input" readonly type="number" style="height:1.26rem;text-align:right;font-family:DINPro-Medium;font-weight:500;color:rgba(91,127,248,1);font-size:16px;" >
         </div>
         <div class="aui-col aui-col-span-2 aui-row-flex-start">
           <span class="num-value num-unit">A</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-17 aui-row-flex-start">
           <span class="param-obj">过载时间动作值</span><span class="param-obj-extra aui-hide" style="margin-left:0.3rem;" >(<span id="gzsj_range"></span > s)</span>
         </div>
         <div class="aui-col aui-col-span-5 aui-row-flex-end">
           <input id="gzsj" class="aui-input param-input" readonly type="number" style="height:1.26rem;text-align:right;font-family:DINPro-Medium;font-weight:500;color:rgba(91,127,248,1);font-size:16px;" >
         </div>
         <div class="aui-col aui-col-span-2 aui-row-flex-start">
           <span class="num-value num-unit">s</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-17 aui-row-flex-start">
           <span class="param-obj">短路电流动作值</span><span class="param-obj-extra aui-hide" style="margin-left:0.3rem;" >(<span id="dldl_range"></span > A)</span>
         </div>
         <div class="aui-col aui-col-span-5 aui-row-flex-end">
           <input id="dldl" class="aui-input param-input" readonly type="number" style="height:1.26rem;text-align:right;font-family:DINPro-Medium;font-weight:500;color:rgba(91,127,248,1);font-size:16px;" >
         </div>
         <div class="aui-col aui-col-span-2 aui-row-flex-start">
           <span class="num-value num-unit">A</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-17 aui-row-flex-start">
           <span class="param-obj">漏电电流动作值</span><span class="param-obj-extra aui-hide" style="margin-left:0.3rem;" >(<span id="lddl_range"></span > A)</span>
         </div>
         <div class="aui-col aui-col-span-5 aui-row-flex-end">
           <input id="lddl" class="aui-input param-input" readonly type="number" style="height:1.26rem;text-align:right;font-family:DINPro-Medium;font-weight:500;color:rgba(91,127,248,1);font-size:16px;" >
         </div>
         <div class="aui-col aui-col-span-2 aui-row-flex-start">
           <span class="num-value num-unit">mA</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-17 aui-row-flex-start">
           <span class="param-obj">过压报警值</span><span class="param-obj-extra aui-hide" style="margin-left:0.3rem;" >(<span id="gybj_range"></span > V)</span>
         </div>
         <div class="aui-col aui-col-span-5 aui-row-flex-end">
           <input id="gybj" class="aui-input param-input" readonly type="number" style="height:1.26rem;text-align:right;font-family:DINPro-Medium;font-weight:500;color:rgba(91,127,248,1);font-size:16px;" >
         </div>
         <div class="aui-col aui-col-span-2 aui-row-flex-start">
           <span class="num-value num-unit">V</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-17 aui-row-flex-start">
           <span class="param-obj">欠压报警值</span><span class="param-obj-extra aui-hide" style="margin-left:0.3rem;" >(<span id="qybj_range"></span > V)</span>
         </div>
         <div class="aui-col aui-col-span-5 aui-row-flex-end">
           <input id="qybj" class="aui-input param-input" readonly type="number" style="height:1.26rem;text-align:right;font-family:DINPro-Medium;font-weight:500;color:rgba(91,127,248,1);font-size:16px;" >
         </div>
         <div class="aui-col aui-col-span-1 aui-row-flex-start">
           <span class="num-value num-unit" style="margin-left:0.5rem;">V</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-17 aui-row-flex-start">
           <span class="param-obj">超温报警值</span><span class="param-obj-extra aui-hide" style="margin-left:0.3rem;" >(<span id="cwbj_range"></span > ℃)</span>
         </div>
         <div class="aui-col aui-col-span-5 aui-row-flex-end">
           <!-- <input class="num-value" style="background-color:red;" id="cwbj">0</input> -->
           <input id="cwbj" class="aui-input param-input" readonly type="number" style="height:1.26rem;text-align:right;font-family:DINPro-Medium;font-weight:500;color:rgba(91,127,248,1);font-size:16px;" >
         </div>
         <div class="aui-col aui-col-span-2 aui-row-flex-start">
           <span class="num-value num-unit" style="margin-left:0.2rem;"></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.addEventListener({
            name: 'handleEdit'
        }, function(ret, err){
            if( ret ){
              if (ret.value.isEdit) { //打开编辑  1.日志不可点 2.显示参数范围 3.input可操作
                $api.addCls($api.byId('show_logs'), 'not-click');
                //---移除dom中的所有aui-hide
                var allDom = $api.domAll('.param-obj-extra');
                for (var i = 0; i < allDom.length; i++) {
                  $api.removeCls(allDom[i], 'aui-hide');
                }
                //------
                //移除readonly  $api.removeAttr(el, 'data')
                var inputDom = $api.domAll('.param-input');
                for (var j = 0; j < inputDom.length; j++) {
                  $api.removeAttr(inputDom[j], 'readonly');
                  inputDom[j].style = "height:1.26rem;text-align:right;font-family:DINPro-Medium;font-weight:500;color:rgba(174,184,206,1);font-size:16px;";
                }
                //----
                //---移除dom中的所有num-unit
                var unitDom = $api.domAll('.num-value');
                for (var k = 0; k < unitDom.length; k++) {
                  $api.removeCls(unitDom[k], 'num-unit');
                }
                //------

              }else {      //完成编辑,1.日志可点击 2.隐藏参数范围 3.input不可操作 设置参数
                $api.removeCls($api.byId('show_logs'), 'not-click');
                //---添加dom中的所有aui-hide
                var allDom = $api.domAll('.param-obj-extra');
                for (var i = 0; i < allDom.length; i++) {
                  $api.addCls(allDom[i], 'aui-hide');
                }
                //------
                //添加readonly  $api.removeAttr(el, 'data')
                var inputDom = $api.domAll('.param-input');
                for (var j = 0; j < inputDom.length; j++) {
                  inputDom[j].readOnly=true;
                  inputDom[j].style = "height:1.26rem;text-align:right;font-family:DINPro-Medium;font-weight:500;color:rgba(91,127,248,1);font-size:16px;";
                }
                //----
                //---添加dom中的所有num-unit
                var unitDom = $api.domAll('.num-value');
                for (var k = 0; k < unitDom.length; k++) {
                  $api.addCls(unitDom[k], 'num-unit');
                }
                //------
                //----设置参数
                cmd();
                //----------
              }
            }
        });


        getDeviceInfos();
      };

      function getDeviceInfos() {
        //获取设备信息
        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) {
          if (ret.code == 0) {
            var info = ret.data.device;
            $api.val($api.byId("gzdl"),info.over_current);
            $api.val($api.byId("gzsj"),info.over_duration);
            $api.val($api.byId("dldl"),info.over_short_current);
            $api.val($api.byId("lddl"),info.over_rest_current);
            $api.val($api.byId("gybj"),info.over_high_voltage);
            $api.val($api.byId("qybj"),info.over_low_voltage);
            $api.val($api.byId("cwbj"),info.over_temp);
            // $api.html($api.byId("cwbj"), info.over_temp);
          }else {
            api.toast({msg: '参数请求失败',duration: 2000,location: 'bottom'});
          }
        });
        //-------
        // 获取参数范围
        api.ajax({
          url: HOST + '/iot_api/v1/app/get_param_range?imei='+defaultImei,
          method: 'GET',
          headers: {
            'Content-Type': 'application/json;charset=utf-8',
            'token': token
          },
        }, function(ret, err) {
          if (ret.code == 0) {
            var ranges = ret.data;
            $api.html($api.byId('gzdl_range') , ranges.over_current_min+'-'+ranges.over_current_max);
            $api.html($api.byId('gzsj_range') , ranges.over_duration_min+'-'+ranges.over_duration_max);
            $api.html($api.byId('dldl_range') , ranges.over_short_current_min+'-'+ranges.over_short_current_max);
            $api.html($api.byId('lddl_range') , ranges.over_rest_current_min+'-'+ranges.over_rest_current_max);
            $api.html($api.byId('gybj_range') , ranges.over_high_voltage_min+'-'+ranges.over_high_voltage_max);
            $api.html($api.byId('qybj_range') , ranges.over_low_voltage_min+'-'+ranges.over_low_voltage_max);
            $api.html($api.byId('cwbj_range') , ranges.over_temp_min+'-'+ranges.over_temp_max);
          }else {
            api.toast({msg: '参数范围请求失败',duration: 2000,location: 'bottom'});
          }
        });
      }

      function cmd() {
        var gzdlDom = $api.byId('gzdl');  gzdlDom.blur();  //取消input焦点
        var gzsjDom = $api.byId('gzsj');  gzsjDom.blur();  //取消input焦点
        var dldlDom = $api.byId('dldl');  dldlDom.blur();  //取消input焦点
        var lddlDom = $api.byId('lddl');  lddlDom.blur();  //取消input焦点
        var gybjDom = $api.byId('gybj');  gybjDom.blur();  //取消input焦点
        var qybjDom = $api.byId('qybj');  qybjDom.blur();  //取消input焦点
        var cwbjDom = $api.byId('cwbj');  cwbjDom.blur();  //取消input焦点
        var paramList = [{'gzdl':"&S2+"},{'gzsj':"&S3+"},{'dldl':"&S4+"},{'lddl':"&S5+"},{'gybj':"&S6+"},{'qybj':"&S7+"},{'cwbj':"&S8+"}];
        for (var i = 0; i < paramList.length; i++) {
          for(var key in paramList[i]){
            var dom_ = eval(key + 'Dom');
            var paramVal = $api.val(dom_);
            if (!(parseFloat($api.html($api.byId(key+'_range')).split('-')[0]) < paramVal && paramVal < parseFloat($api.html($api.byId(key +'_range')).split('-')[1]))) {
              api.toast({msg: '请输入有效参数范围',duration: 2000,location: 'bottom'});
              return;
            }
            //处理-->修改
            api.showProgress({
              style: 'default',
              animationType: 'fade',
              title: '操作中...',
              text: '正在设置参数',
              modal: true
            });
            api.ajax({
                url: HOST + '/iot_api/v1/app/set_device',
                method: 'post',
                headers: {
                  'Content-Type': 'application/json;charset=utf-8',
                  'token': token
                },
                data: {
                  body: {
                    imei:defaultImei,
                    command:paramList[i][key],
                    value: paramVal.toString(),
                    user_id:userId
                  }
                }
            }, function(ret, err) {
              api.hideProgress();
              if (ret.code == 0) {
                api.ajax({
                    url: HOST + '/iot_api/v1/app/sync_device',
                    method: 'post',
                    headers: {
                      'Content-Type': 'application/json;charset=utf-8',
                      'token': token
                    },
                    data: {
                      body: {
                        imei:defaultImei,
                      }
                    }
                }, function(ret, err) {
                  if (!ret) {
                    api.toast({
                        msg: '操作失败,请稍候再试!',
                        duration: 3000,
                        location: 'bottom'
                    });
                    return;
                  }
                });
              }else {
                api.toast({msg: '编辑失败,请稍后再试',duration: 2000,location: 'bottom'});
                return;
              }
            });
         }
        }
        getDeviceInfos();

      }

      function showLogs() {
        console.log(111);
      }
  </script>
  </html>