设备列表

2019/bj-zqzt/biz/css/base.css

@@ -2747,3 +2747,77 @@ button.add-others {
.pages-property-details.active .form-btn {
  display: block;
}
/* 设备列表 */
.device-item {
  margin: 0 .16rem .16rem;
  padding: .15rem .15rem .16rem;
  border:.01rem solid rgba(230,233,237,1);
}
.device-item .device-name {
  font-size:.13rem;
  font-weight:400;
  color:rgba(43,47,51,1);
  line-height: .15rem;
}
.device-item .device-status {
  height: .15rem;
  background:rgba(238,246,255,1);
  border-radius: .025rem;
  padding-left: .06rem;
  padding-right: .06rem;
  font-size: .1rem;
  font-weight:400;
  color:rgba(63,147,248,1);
  line-height: .15rem;
  text-align: center;
  margin-left: .08rem;
}
.device-info-more div:first-child {
  font-size: .12rem;
  font-weight:400;
  color:rgba(63,147,248,1);
  line-height: .14rem;
  margin-right: .015rem;
}
.device-info-more .arrow-right {
  width: .12rem;
  height: .12rem;
  background: url(../img/arrow-right2.png) center center no-repeat;
  background-size: contain;
}
.device-ports {
  margin-top: .145rem;
  line-height: .12rem;
}
.device-item .device-title {
  width:.72rem;
  font-size: .12rem;
  font-weight:400;
  color:rgba(43,47,51,1);
  margin-right: .15rem;
}
.device-progress {
  width:52%;
  height: .05rem;
  background-color:rgba(230,233,237,1);
  border-radius: .025rem;
}
.device-progress-bar {
  height: .05rem;
  border-radius: .025rem;
  background-color: rgba(63,147,248,1);
  width: 0
}
.device-number span{
  font-size: .12rem;
  font-weight:400;
  color:rgba(142,147,153,1);
}
.device-number span:first-child{
  color:rgba(63,147,248,1);
}
.device-bandwidth {
  margin-top: .125rem;
  line-height: .12rem;
}

2019/bj-zqzt/biz/js/building-details.js

@@ -212,12 +212,12 @@ require(['jquery', 'ipuUI', 'echarts'], function ($, ipuUI, echarts) {
    // 物业信息点击事件
    $(".property-information").on("click", ".property-item", function () {
      location.href="property-details.html"
      location.href="property-details.html";
    });
    // 资源 设备信息点击事件
    $(".resource-info").on("click", ".computer-room-item", function () {
      location.href="device-list.html";
    });
  });

2019/bj-zqzt/biz/js/device-list.js

@@ -0,0 +1,75 @@
require(['jquery', 'ipuUI',], function ($, ipuUI) {
  $(function () {
    showDeviceList();
    function showDeviceList() {
      var totalPage = 1;  // 总页数
      var nowPage = 1;    // 当前显示第几页，因为默认有一些数据了，所以为1
      var listObj = $("#refresh ul");
      var contentHtml = $("li:lt(5)", listObj).clone(); // 测试用，复制5条数据
      // 移除初始的数据，并初始nowPage=0;
      listObj.empty();
      nowPage = 0;
      var countNo = 0; // 重要计数器,以此来判断不需要
      // 初始化下拉刷新
      var myRefresh = ipuUI.refresh("#refresh", {
        bottomLoadFun: function () { // 加载更多
          console.log('加载更多'); // 手势上拉，内容下滚动动
          addData();
        },
        topLoadFun: function () { // 刷新
          console.log('刷新数据'); // 手势下拉，内容上滚动
          refreshData();
        }
      });
      // 查询数据
      function addData(refresh) {// 0搜索，1刷新，2加载更多
        $('#refresh .no-result-msg').hide();
        nowPage++;
        var localCountNo = ++countNo;  // 执行查询前，保留当前计数器，当查询返回时进行检查是否最新查询，不是则抛弃查询结果
        setTimeout(function () { // 模拟延时加载
          if (localCountNo == countNo) { // 检查是否最新查询返回数据，不是则抛弃查询结果
            // 此处先更新togalPage等信息
            myRefresh.enableTop(totalPage != 0); // 假设totalPage为0时表示没数据，此时停用刷新功能，也可不停用，强行刷新
            myRefresh.enableBottom(nowPage < totalPage); // enable应该总是先于endBottom/TopLoading方法执行
            if (totalPage == 0) {
              $('#refresh .no-result-msg').show();
            } else {
              if (refresh) {                    // 顶部刷新，刷新也可能已经没有数据了，待处理
                listObj.empty(); // 清空已有内容
                contentHtml.clone().appendTo(listObj);
                myRefresh.endTopLoading(); //最后调用
              } else {  // 底部加载更多,或查询
                contentHtml.clone().appendTo(listObj);
                myRefresh.endBottomLoading();  //最后调用
              }
            }
          }
        }, 3000);
      }
      // 刷新
      function refreshData() {   // 刷新数据
        nowPage = 0; // 底部加载时，停用底部加载功能和底部加载
        myRefresh.enableBottom(false);
        if (myRefresh.bottomLoading) {
          myRefresh.endBottomLoading();
        }
        addData(true);
      }
    }
    // 点击选项，打开设备详情界面
    $(".device-list").on("click", ".device-info-more", function () {
      location.href="device-details.html";
    });
  });
});

2019/bj-zqzt/device-list.html

@@ -0,0 +1,150 @@
<!DOCTYPE html>
<html lang="en">
<head>
  <title>楼宇详情-设备列表</title>
  <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 content="telephone=no" name="format-detection"/>
  <link rel="stylesheet" type="text/css" href="ipu/ui/css/ipuUI.css">
  <link rel="stylesheet" type="text/css" href="biz/css/base.css">
  <script src="ipu/lib/requirejs/require.min.js"></script>
  <script src="biz/js/require-config.js"></script>
  <script src="biz/js/device-list.js"></script>
</head>
<body class="pages-device-list">
<div class="ipu-flex-row ipu-flex-vertical">
  <div class="ipu-flex-col">
    <div class="ipu-toolbar common-border-bottom">
      <a class="ipu-fn-left link-back ipu-flex ipu-flex-align-center" href="javascript:history.back(-1);" id="back">
        <div class="left-back"></div>
      </a>
      <h1 class="ipu-toolbar-title ipu-flex ipu-flex-align-center ipu-flex-justify-center">
        <div class="max-limit-title">东城区东直门通信枢纽楼位置点1层传输骨干1机房</div>
      </h1>
    </div>
  </div>
  <div class="ipu-flex-col ipu-flex-col-auto">
    <div class="page-content">
      <div style="height: .16rem;"></div>
      <div class="ipu-list ipu-list-media ipu-flex-content" id="refresh" style="margin-top: .16rem;">
        <!-- 组件html结构，最外层div应有一个固定的高度，会在此元素上初始化iScroll -->
        <div class="ipu-refresh-wrapper">
          <!-- 此处组件初始化后，会添加上拉html -->
          <div class="refresh-content">
            <div>
              <ul class="device-list">
                <li class="device-item">
                    <div class="ipu-flex ipu-flex-align-center">
                      <div class="device-name">PTN5600</div>
                      <div class="device-status">在网</div>
                      <div class="ipu-flex-grow-1"></div>
                      <div class="device-info-more ipu-flex ipu-flex-align-center">
                        <div>详情</div>
                        <div class="arrow-right"></div>
                      </div>
                    </div>
                    <div class="device-ports ipu-flex ipu-flex-align-center">
                      <div class="device-title">可用端口数</div>
                      <div class="device-progress">
                        <div class="device-progress-bar" style="width:70.4%"></div>
                      </div>
                      <div class="ipu-flex-grow-1"></div>
                      <div class="device-number">
                        <span>76</span><span>/</span><span>108</span>
                      </div>
                    </div>
                    <div class="device-bandwidth ipu-flex ipu-flex-align-center">
                      <div class="device-title">可用带宽</div>
                      <div class="device-progress">
                        <div class="device-progress-bar" style="width:55.8%"></div>
                      </div>
                      <div class="ipu-flex-grow-1"></div>
                      <div class="device-number">
                        <span>48</span><span>/</span><span>86</span>
                      </div>
                    </div>
                </li>
                <li class="device-item">
                    <div class="ipu-flex ipu-flex-align-center">
                      <div class="device-name">PTN3800</div>
                      <div class="device-status">在网</div>
                      <div class="ipu-flex-grow-1"></div>
                      <div class="device-info-more ipu-flex ipu-flex-align-center">
                        <div>详情</div>
                        <div class="arrow-right"></div>
                      </div>
                    </div>
                    <div class="device-ports ipu-flex ipu-flex-align-center">
                      <div class="device-title">可用端口数</div>
                      <div class="device-progress">
                        <div class="device-progress-bar" style="width:70.4%"></div>
                      </div>
                      <div class="ipu-flex-grow-1"></div>
                      <div class="device-number">
                        <span>76</span><span>/</span><span>108</span>
                      </div>
                    </div>
                    <div class="device-bandwidth ipu-flex ipu-flex-align-center">
                      <div class="device-title">可用带宽</div>
                      <div class="device-progress">
                        <div class="device-progress-bar" style="width:55.8%"></div>
                      </div>
                      <div class="ipu-flex-grow-1"></div>
                      <div class="device-number">
                        <span>48</span><span>/</span><span>86</span>
                      </div>
                    </div>
                </li>
                <li class="device-item">
                    <div class="ipu-flex ipu-flex-align-center">
                      <div class="device-name">PTN2500</div>
                      <div class="device-status">在网</div>
                      <div class="ipu-flex-grow-1"></div>
                      <div class="device-info-more ipu-flex ipu-flex-align-center">
                        <div>详情</div>
                        <div class="arrow-right"></div>
                      </div>
                    </div>
                    <div class="device-ports ipu-flex ipu-flex-align-center">
                      <div class="device-title">可用端口数</div>
                      <div class="device-progress">
                        <div class="device-progress-bar" style="width:70.4%"></div>
                      </div>
                      <div class="ipu-flex-grow-1"></div>
                      <div class="device-number">
                        <span>76</span><span>/</span><span>108</span>
                      </div>
                    </div>
                    <div class="device-bandwidth ipu-flex ipu-flex-align-center">
                      <div class="device-title">可用带宽</div>
                      <div class="device-progress">
                        <div class="device-progress-bar" style="width:55.8%"></div>
                      </div>
                      <div class="ipu-flex-grow-1"></div>
                      <div class="device-number">
                        <span>48</span><span>/</span><span>86</span>
                      </div>
                    </div>
                </li>
              </ul>
            </div>
            <div class="no-result-msg ipu-fn-p ipu-txt-center">
              暂无记录
            </div>
          </div>
          <!-- 此处组件初始化后，会添加下拉html -->
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>