master

分支 (2)

管理

管理

master

killbug

hejiaqin
/
mensuoControl123.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">
      <input class="date-hook date-input" type="text" id="date-hook" readonly data-year="2018" data-month="5" data-day="2" />
      <span class="week week-hook" id="week-hook"></span>
      <span class="iconfont icon-calendar calendar" id="calendar-hook" onclick="_initDate()" ></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="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/iScroll.js"></script>
  <script src="./javascript/Mdate.js"></script>
  <script>
    // 历史信息 今日的日期 和星期
    let str_date = formatDate()
    let str_week = getDay()
    let dateEl = document.querySelector('.date-hook')
    dateEl.value = str_date
    console.log(str_date)
    dateEl.dataset.year = str_date.split('/')[0]
    dateEl.dataset.month = str_date.split('/')[1]
    dateEl.dataset.day = str_date.split('/')[2]
    document.querySelector('.week-hook').innerHTML = str_week
    // div的高度
    const clientHeight = document.documentElement.clientHeight;
    let statusBox = document.querySelector('.door-status-box')
    statusBox.style.height = clientHeight - 389 + 'px'
    function _initDate () {
      console.log('黄欢')
      new Mdate("calendar-hookcalendar-hook", {
        acceptId: "date-hook",
        weekacceptId: 'week-hook',
        beginYear: "2018",
        beginMonth: "5",
        beginDay: "1",
        format: "-",
        callback:function (value) {
          test(value)
        }
      })

    }
      function test(value){
        console.log(`${value}`)
      }
  </script>
  <script>
    const lockWay = 'unlockWay' // 开门方式
    const alarmType = 'dh.alarmType' // 报警类型
    // 历史信息
    let historyData = {
      list:[{
        "deviceId": "1234567",
        "timeStamp": "2017-10-12T10:21:25+08:00",
        "timeStampMs": 1507774885000,
        "params": [{
            "name": "unlockWay",
            "value": "0"
          }]
        },
        {
            "deviceId": "123456",
            "timeStamp": "2017-10-12T10:18:41+08:00",
            "timeStampMs": 1507774721000,
            "params": [{
                "name": "unlockWay",
                "value": "1"
            }]
        },
        {
            "deviceId": "123456",
            "timeStamp": "2017-10-12T10:18:41+08:00",
            "timeStampMs": 1507774721000,
            "params": [{
                "name": "dh.alarmType",
                "value": "1"
            }]
        },
        {
            "deviceId": "123456",
            "timeStamp": "2017-10-12T10:18:41+08:00",
            "timeStampMs": 1507774721000,
            "params": [{
                "name": "dh.alarmType",
                "value": "0"
            }]
        }
      ]
    }
    let historyHtml = template('historyDataTpl',historyData)
    document.querySelector('.door-status-box').innerHTML = historyHtml
    /**
    * 门锁信息
    */
    let currentParam = {
      "resultCode": 0,
      "devices": [{
          "id": "xxxxxx",
          "lastDataReceivedDate": "2018-02-05T15:43:46+08:00",
          "lastDataReceivedDateMs": 1517816626000,
          "lastMeasureDate": "2018-02-05T15:43:46+08:00",
          "lastMeasureDateMs": 1517816626000,
          "parameters": [
            {
                "name": "dh.alarmType",
                "value": "0",
                "lastUpdateTime": "2018-02-05T15:43:46+08:00",
                "lastUpdateTimeMs": 1517816626000
            },
            {
                "name": "unlockWay", // 门锁是否开
                "value": "1",
                "lastUpdateTime": "2018-02-05T15:42:31+08:00",
                "lastUpdateTimeMs": 1517816551000
            }
          ]
      }]
    }
    let lockInfoData = {
      arr:[{
                "name": "connectionStatus",
                "value": "0",
                "lastUpdateTime": "2018-02-05T15:43:46+08:00",
                "lastUpdateTimeMs": 1517816626000
            },
            {
                "name": "outletStatus", // 门锁是否开
                "value": "1",
                "lastUpdateTime": "2018-02-05T15:42:31+08:00",
                "lastUpdateTimeMs": 1517816551000
            }
            // {
            //     "name": "dh.alarmType", // 报警参数
            //     "value": "2",
            //     "lastUpdateTime": "2018-02-05T15:42:31+08:00",
            //     "lastUpdateTimeMs": 1517816551000
            // }
        ]
    }
    let resultLockInfoData = handleDataCon(currentParam['devices'][0]['parameters'])
    console.log(resultLockInfoData)
    let lockInfoHtml = template('lockInfoTpl',resultLockInfoData)
    document.querySelector('.door-control-body').innerHTML = lockInfoHtml
  </script>
  <script>
    // startLoading()
  </script>
  <script src="./javascript/hejia-1.0.0.min.js"></script>
</body>
</html>