master

分支 (2)

管理

管理

master

killbug

hejiaqin
/
mensuoControlHeJia.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./css/reset.css"/>
  <link rel="stylesheet" href="./css/index.css"/>
  <link rel="stylesheet" href="./css/fonts/iconfont.css"/>
  <title>智能门锁</title>
</head>
<body>
  <header class="door-control-hearder door-head">
      <a onclick="history.go(-1)" class="back iconfont icon-back" ></a>
      <h1>智能门锁</h1>
  </header>
  <!-- 门锁信息 -->
  <section class="door-control-body">
  </section>
  <!-- 门锁模板 -->
  <script id="lockInfoTpl" type="text/html">
    {{if name === 'kong'}}
    <p class="battery-status-icon">
        <span class="iconfont icon-battery battery f-green"></span>
        <span class="battery-text">正常</span>
      </p>
      <div class="door-status-img">
        <div class="circle-green">
          <div class="circle-inner-green">
            <span class="iconfont icon-lockclose green-icon"></span>
          </div>
        </div>
      </div>
    {{else}}
      <p class="battery-status-icon">
      {{if name === 'dh.alarmType' && value === '2'}}
        <span class="iconfont icon-batterylowpower battery f-red"></span>
        <span class="battery-text">欠压</span>
      {{else}}
      <span class="iconfont icon-battery battery f-green"></span>
      <span class="battery-text">正常</span>
      {{/if}}
    </p>
    <div class="door-status-img">
        {{if name === 'dh.alarmType'}}
      <div class="circle-red">
        <div class="circle-inner-red">
          {{if value === '2'}}
          <span class="iconfont icon-lowpower red-icon"></span>
          <h1 class="alarm-text">低电压报警</h1>
          {{else if value === '1'}}
          <span class="iconfont icon-alarm red-icon"></span>
          <h1 class="alarm-text">防拆报警</h1>
          {{else}}
          <span class="iconfont icon-illegalopen red-icon"></span>
          <h1 class="alarm-text">非法开锁</h1>
          {{/if}}
        </div>
      </div>
      <!-- <p class="current-status">门: 已关闭</p> -->
      {{else}}
        <div class="circle-green">
          <div class="circle-inner-green">
            <span class="iconfont icon-lockopen green-icon"></span>
          </div>
        </div>
        <!-- <p class="current-status">门: {{value === '0'? '已关闭': '已开启'}}</p> -->
        {{/if}}
    </div>
    {{/if}}
  </script>
  <!-- 门锁历史信息 -->
  <section class="door-history-status">
    <div class="date ">
      <span class="date-hook"> </span>
      <span class="week week-hook"></span>
      <span class="iconfont icon-calendar calendar"></span>
    </div>
    <div class="door-status-box">
    </div>
  </section>
  <script>
  </script>
  <!-- 门锁历史信息模板 -->
  <script id="historyDataTpl" type="text/html">
    {{each list as item index}}
    <div class="status-item">
      <span class="time">{{formatDate(false, item.timeStampMs)}}</span>
      {{each item.params as child childInd}}
      <h2 class="reason">检测到{{filterParamName(child.name,child.value)}}</h2>
      {{/each}}
    </div>
    {{/each}}
  </script>
  <!-- 提示弹窗 -->
  <div id="toast" class="hide">
    <div class="toast-hook toast">
        文字提醒
    </div>
  </div>
  <!-- 加载动画 -->
  <div id="loader" class="hide">
    <div class="spinner">
        <div class="double-bounce1"></div>
        <div class="double-bounce2"></div>
    </div>
  </div>
  <!-- js 从这里开始 -->
  <script src="./javascript/template.js"></script>
  <script src="./javascript/until.js"></script>
  <script src="./javascript/hejia-1.0.0.min.js"></script>
  <script>
    const lockWay = 'unlockWay' // 开门方式
    const alarmType = 'dh.alarmType' // 报警类型
    const lockStatus = 'outletStatus' // 锁的状态
     /**
    * 门锁信息
    */
    let todayStamp = new Date(new Date().setHours(0, 0, 0, 0)).getTime() // 今日凌晨的时间戳
    let historyParam = {}
    Hejia.ready(function(){
      // 页面加载完成后要立即调用Hejia全局对象执行的代码逻辑写这里
      /**
      * 门锁目前的状态
      */
      let params = {paramName: ['unlockWay', 'dh.alarmType']}
      Hejia.getCurrentParam(params, function (device) {
        //device object
        // 隐藏提示语
        if (toastEle.indexOf('hide') < 0) {
          hideToast()
        }
        let _data = device['devices'] // 数组
        // handleDataCon()处理数据 如果有报警信息优先取出
        let resultLockInfoData = handleDataCon(_data[0]['parameters'])
        let lockInfoHtml = template('lockInfoTpl',resultLockInfoData)
        document.querySelector('.door-control-body').innerHTML = lockInfoHtml
      }, function (msg, obj){
        // msg - String => error message
        // obj – Object => { resultCode:!0, resultCodeMessage: string }
        showToast(msg)
      });
      /**
      * 门锁历史信息
      */
      Hejia.getHistoryParam({ startDate: todayStamp}, function (arr) {
          // arr - Array=> history records.
          historyParam['list'] = arr
          let historyHtml = template('historyDataTpl',historyParam)
          document.querySelector('.door-status-box').innerHTML = historyHtml
        }, function (msg, obj){
          showToast(msg)
        });
    });
  </script>
</body>
</html>