selfAlarm_frm.html 12.3 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>单个设备报警信息_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/alarm/alarm.css"/>
      <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
      <link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
      <style>
          html,
          body{
            background-color: #F4F6F9;
          }
      </style>
  </head>
  <body>

    <div class="search-view-inline" style="position:fixed;top:0;z-index:99;">
        <div class="select-list aui-ellipsis-1" tapmode  onclick="selectTime();">
            <span class="choose-device-title" id="select_date">请选择日期</span>
            <i></i>
        </div>
        <label style="background-color:rgba(240,245,255,1);"></label>
        <div class="select-list aui-ellipsis-1" tapmode  onclick="selectStatus();">
            <span class="choose-device-title" id="select_status">报警类型</span>
            <i></i>
        </div>
    </div>
    <div class="alarm-panel" id="alarm_panel">
    </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 page = 1,
        limit = 100,
        selected_status = 'all',
        sequence = 0;
        hasNext= true;
      var selected_time = '';
      var userId;
      var token;
      var selectedHandleList = [];
      apiready = function(){
        api.parseTapmode();
        token = $api.getStorage('userToken');
        userId = $api.getStorage('userID');
        defaultImei = $api.getStorage('defaultDevice');
        /**上拉加载 */
        api.addEventListener({
            name: 'scrolltobottom',
            extra: {
                threshold: 0
            }
        }, function(ret, err) {
            if (hasNext) {
              page += 1;
            }
            getAlarmList();
        });
        /** 下拉刷新 */
        api.setRefreshHeaderInfo({
            loadingImg:'../../image/alpha0.png',
            bgColor: '#FFFFFF',
            textColor: '#AEB8CE',
            textDown: '下拉刷新...',
            textUp: '松开刷新...'
        }, function(ret, err) {
          page = 1;
          selected_status = 'all';
          selected_time = '';
          sequence = 0;
          hasNext = true;
          $api.html($api.byId("select_date"), "请选择时间");
          $api.html($api.byId("select_status"), "报警类型");
          //---移除dom中的所有元素
          var allDom = $api.domAll('.list-panel'); //list-panel
          for (var i = 0; i < allDom.length; i++) {
            $api.remove(allDom[i]);
          }
          getAlarmList();
          api.refreshHeaderLoadDone();
        });

        api.addEventListener({
            name: 'changeSelfAlarmLogType'
        }, function(ret, err){
            if( ret ){
              page = 1;
              sequence = 0;
              hasNext = true;
              $api.html($api.byId('select_status'), alarmTypeList(ret.value.curSelect));
              if (ret.value.curSelect == 'all') {
                selected_status = 'all';
              }else {
                selected_status = ret.value.curSelect
              }
              //---移除dom中的所有元素
              var allDom = $api.domAll('.list-panel'); //list-panel
              for (var i = 0; i < allDom.length; i++) {
                $api.remove(allDom[i]);
              }
              getAlarmList();
              api.refreshHeaderLoadDone();
            }
        });


        api.addEventListener({
            name: 'handleAllSelfAlarmMsgBegin'
        }, function(ret, err){
            if( ret ){
              if (ret.value.isEdit) {    //打开弹性布局
                //
                var normalDoms = $api.domAll('.normal-area');
                for (var i = 0; i < normalDoms.length; i++) {
                  $api.removeCls(normalDoms[i], 'aui-flex-item-12');
                  $api.addCls(normalDoms[i], 'aui-flex-item-11');
                }
                var chooseDoms = $api.domAll('.choose-area');
                for (var j = 0; j < chooseDoms.length; j++) {
                  $api.removeCls(chooseDoms[j], 'aui-hide');
                }

                //打开底部操作栏
                api.openFrame({
                    name: 'alarm_tool',
                    url: '../alarm/alarm_tool.html',
                    rect: {
                        x: 0,
                        y: api.winHeight - api.pageParam.f -60,
                        w: api.winWidth,
                        h: 65
                    },

                    pageParam: {
                      isSelf: true,
                    }
                });

              }else {          //关闭弹性布局;找到所有selected图,置为unselected
                var normalDoms = $api.domAll('.normal-area');
                for (var i = 0; i < normalDoms.length; i++) {
                  $api.removeCls(normalDoms[i], 'aui-flex-item-11');
                  $api.addCls(normalDoms[i], 'aui-flex-item-12');
                }
                var chooseDoms = $api.domAll('.choose-area');
                for (var j = 0; j < chooseDoms.length; j++) {
                  $api.addCls(chooseDoms[j], 'aui-hide');
                  ((chooseDoms[j].childNodes)[0]).src = '../../image/alarm/icon-unselected.png';
                }

                selectedHandleList = [];
                //发送消息至底部工具栏 置空数据
                //...
                //关闭底部操作栏
                api.closeFrame({
                    name: 'alarm_tool'
                });

              }
            }
        });

        api.addEventListener({
            name: 'alarmSelectAll'
        }, function(ret, err){
          if( ret ){
            selectedHandleList = [];
            var chooseDoms = $api.domAll('.choose-area');
            if (ret.value.chooseAll) {
              for (var j = 0; j < chooseDoms.length; j++) {
                $api.removeCls(chooseDoms[j], 'aui-hide');
                ((chooseDoms[j].childNodes)[0]).src = '../../image/alarm/icon-selected.png';
                var id = $api.attr((chooseDoms[j].childNodes)[0], 'data-id');
                selectedHandleList.push(id);
              }
            }else {
              for (var j = 0; j < chooseDoms.length; j++) {
                ((chooseDoms[j].childNodes)[0]).src = '../../image/alarm/icon-unselected.png';
              }
            }
          }
        });

        api.addEventListener({ //标记已处理
            name: 'signReadForSlefAlarm'
        }, function(ret, err){
            if( ret ){
              handleRead();
            }
        });


        if (api.pageParam.staticToAlarm) {
          selected_time = api.pageParam.staticToAlarm;
          $api.html($api.byId("select_date"), selected_time);
          //这一段貌似没用
          page = 1;
          sequence = 0;
          hasNext = true;
          //-------
        }
        getAlarmList();
      };

      function getAlarmList() {
        api.ajax({
          url: HOST + '/iot_api/v1/app/get_warning_list?page=' + page + '&limit=' + limit + '&imei=' + defaultImei + '&warning_type=' + selected_status + '&user_id=' + userId + '&date=' + selected_time,
          method: 'GET',
          headers: {
            'Content-Type': 'application/json;charset=utf-8',
            'token': token
          },
        }, function(ret, err) {
          if (ret.code == 0) {
            if (!hasNext && !ret.data.next) {
              api.toast({msg: '暂无更多数据!',duration: 2000,location: 'bottom'});
              return;
            }

            var nullDom = $api.domAll('.no-data');
            for (var i = 0; i < nullDom.length; i++) {
              $api.remove(nullDom[i]);
            }
            var warningList = ret.data.rows;
            if (warningList.length >0) {
              for (var i = 0; i < warningList.length; i++) {
                sequence += 1;
                var warningDomHtml =  addWarningListHtml(warningList[i],sequence);
                $api.append($api.byId("alarm_panel"), warningDomHtml);
              }
            }else {
              noData($api.byId("alarm_panel"),5);
            }
            hasNext = ret.data.next;
          }else {
            api.toast({msg: '网络错误',duration: 2000,location: 'bottom'});
          }
        });
      }

      function selectTime() {
        var date_;
        if (selected_time == '') {
          date_ = new Date();
        }else {
          date_ = selected_time;
        }
        api.openPicker({
            type: 'date',
            date: date_,
            title: '选择日期',
        }, function(ret, err) {
          if (ret) {
            var allDate = timeFormater(ret.year,ret.month,ret.day);
            var date = new Date(allDate);
            var curdate = new Date();
            if (curdate.getTime() >= date.getTime()) {
              $api.html($api.byId("select_date"), allDate);
              selected_time = allDate;
              page = 1;
              sequence = 0;
              hasNext = true;
              //---移除dom中的所有元素
              var allDom = $api.domAll('.list-panel'); //list-panel
              for (var i = 0; i < allDom.length; i++) {
                $api.remove(allDom[i]);
              }
              getAlarmList();
            }else {
              addAlert('请选择有效查询日期');
            }
          }
        });
      }

      function selectStatus() {

        api.openFrame({
            name: 'alarmTypeSelect_frm',
            url: '../alarm/alarmTypeSelect_frm.html',
            rect: {
                x: 0,
                // y: api.winHeight-203,
                y: api.pageParam.h,
                w: api.winWidth,
                h: api.winHeight-api.pageParam.h-api.pageParam.f
            },
            pageParam: {
                selected: selected_status,
                isSelfPage: true,
            },
            bounces: false,
            animation: {
                type:"fade",                //动画类型(详见动画类型常量)
                subType:"from_bottom",       //动画子类型(详见动画子类型常量)
                duration:300                //动画过渡时间,默认300毫秒
            }
        });

      }

      function chooseToHandle(dom,msg_id) {
        if (dom.src.indexOf("unselected") != -1) { //选中操作
          dom.src = '../../image/alarm/icon-selected.png';
          if ( selectedHandleList.indexOf(msg_id) == -1 ) {  //防止list数据重复
            selectedHandleList.push(msg_id);
          }
        }else {  //取消选中按钮
          dom.src = '../../image/alarm/icon-unselected.png';
          var index = selectedHandleList.indexOf(msg_id);
          if ( index > -1 ) {
            selectedHandleList.splice(index, 1);
          }
        }
      }

      function handleRead() {
        if (selectedHandleList.length == 0 ) {
          api.toast({msg: '请选择要处理的消息'});
        }else {
          //关闭底部操作栏
          api.closeFrame({
              name: 'alarm_tool'
          });
          api.showProgress({
              title: '处理中...',
              text: '稍等片刻...',
              modal: true
          });
          api.ajax({
              url: HOST + '/iot_api/v1/app/batch_resolve_warning',
              method: 'post',
              headers: {
                'Content-Type': 'application/json;charset=utf-8',
                'token': token
              },
              data: {
                body: {
                  user_id: userId,
                  list: selectedHandleList
                }
              }
          }, function(ret, err) {
            api.hideProgress();
            if (ret.code == 0) {
              api.sendEvent({
                  name: 'change_device'
              });

              api.sendEvent({
                  name: 'reloadSelfAlarmPage',
              });

            }
          });


        }
      }
  </script>
  </html>