master

分支 (2)

管理

管理

master

killbug

hejiaqin
/
wangGuanControl.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
  <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"/>
  <style>
    .testinput{    border: 1px solid #dcdcdc;
    padding: 5px 10px;}
  </style>
  <title>网关</title>
</head>
<body>
  <header class="door-control-hearder door-head">
    <a class="back iconfont icon-back" onclick="history.go(-1)"></a>
      <h1>网关</h1>
  </header>
  <div class="door-control-box">
    <input type="text" class="testinput" readonly onclick="test()" value="点击一下吧">
    <section class="door-control-body">
    </section>
  </div>

  <!-- 网关模板 -->
  <script id="wagnguanTpl" type="text/html">
    {{each list as item}}
    {{if item.name === 'connectionStatus'}}
      <p class="battery-status-icon">
        <span class="iconfont icon-battery battery f-green"></span>
        <span class="battery-text">{{item.value === '1'? '正常':'— —'}}</span>
      </p>
      <!-- 离线 -->
      {{if item.value === '0'}}
      <!-- 如何使设备上线 -->
        <a class="tips" onclick="Tips.showTips()">如何使设备上线?</a>
        <div class="door-status-img">
          <div class="circle-gray">
            <div class="circle-inner-gray">
              <span class="iconfont icon-offline gray-icon"></span>
            </div>
          </div>
        </div>
        <p class="current-status">离线状态</p>
      {{else}}
        <!-- 在线-->
        <div class="door-status-img">
          <div class="circle-green">
            <div class="circle-inner-green">
              <span class="iconfont icon-online green-icon"></span>
            </div>
          </div>
        </div>
        {{/if}}
      {{/if}}
      <!-- 门的状态 -->
      <!-- {{if item.name === 'connectionStatus' && item.value === '0'}}
          <p class="current-status">离线状态</p>
      {{/if}} -->
    {{/each}}
  </script>
  <!-- tips弹窗 -->
  <div class="tips-content">
    <p class="title">如何使用设备上线</p>
    <div class="text">
        <h3>1.保持设备上线</h3>
        设备通电后，开机使设备启动。
        如未通电，请通电后等待设备上线。
        <br>
        <h3>2.保持设备网络正常</h3>
        按住中继器的功能键5S以上。
    </div>
    <a class="btn-next" onclick="Tips.hiddenTips()">我知道了</a>
  </div>
  <div class="mask"></div>
  <script>

  </script>
  <script src="./javascript/hejia-1.0.0.min.js"></script>
  <script src="./javascript/template.js"></script>
  <script src="./javascript/until.js"></script>
  <script>
    function test() {
      alert('弹出框')
    }
    let networkData = {
      list: [
            {
              "name": "connectionStatus",
              "value": "1",
              "lastUpdateTime": "2018-02-05T15:42:31+08:00",
              "lastUpdateTimeMs": 1517816551000
            }
        ]
    }
    let networkHtml = template('wagnguanTpl', networkData)
    document.querySelector('.door-control-body').innerHTML = networkHtml
  </script>
</body>
</html>