<!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></title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css">
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" href="../../css/aui.css">
    <link rel="stylesheet" href="../../css/projeck.css">
    <style>
        body{
            background: #fff;
        }
        .content_item li{
            padding: 15px;
        }
        .status_title{
            justify-content: flex-start;
            -webkit-justify-content: flex-start;
            color: #284572;
            padding-bottom: 10px;
            border-bottom: 1px solid #ebeef3;
        }
        .status_title i{
            display: block;
            width: 40px;
            height: 40px;
            margin-right: 15px;
        }
        .status_text span{
            display: block;
            color: #97a3b4;
            font-size: 14px;
        }
        .status_text .col{
            text-align: center;
            padding-top: 14px;
        }
        .status_text .col:nth-child(1) span:last-child{
            color: #2c3e50;
        }
        .status_text .col:nth-child(2) span:last-child{
            color: #e74c3c;
        }
        .status_text .col:nth-child(3) span:last-child{
            color: #27ae60;
        }
        .status_text .col:nth-child(4) span:last-child{
            color: #2873ff;
        }
    </style>
</head>
<body>
<div class="api_layout">
  <div class="content_items">
       <ul class="content_item" id="content_item">

       </ul>
  </div>
</div>
<div class="noText hide" id="nocode">
  <img src="../../image/noText.png" alt="">
</div>
<script type="text/template" id="templateMonitor">
    {{~it:value}}
    <li class="relative after-border" onclick="statusFun('{{=value.typeCodeDesc}}','{{=value.typeCode}}','')">
        <div class="status_title flex-space">
            <span>{{=value.typeCodeDesc}}</span>
        </div>
        <div class="status_text flex-wrap">
             <div class="col flex-con">
                 <span>正常/开</span>
                 <span>{{=value.value.normalCount}}个</span>
             </div>
            <div class="col flex-con">
                <span>报警/停</span>
                <span>{{=value.value.alarmCount}}个</span>
            </div>
            <div class="col flex-con">
                <span>标校</span>
                <span>{{=value.value.calibrateCount}}个</span>
            </div>
            <div class="col flex-con">
                <span>故障</span>
                <span>{{=value.value.exceptionCount}}个</span>
            </div>
        </div>
    </li>
    {{~}}
</script>
<script src="../../script/api.js"></script>
<!-- <script src="../../script/fastclick.min.js"></script> -->
<!-- <script src="../../script/aui-toast.js" charset="utf-8"></script> -->
<script src="../../script/doT.min.js"></script>
<script src="../../script/config.js"></script>
<script>
    var toast = new auiToast();
    var isLoadding = true;
		var skip = 1;
    apiready = function () {
      // 上啦加载
      api.addEventListener({
        name : 'scrolltobottom',
        extra : {
          threshold : 20 //设置距离底部多少距离时触发，默认值为0，数字类型
        }
      }, function(ret, err) {
        if (!isLoadding) {
          isLoadding = true;
          searchData()
        }
      });
    };
   function searchData(userName) {
      var data = {
        name:userName,
        type:'test',
        pageNo:1,
        pageSize:20
      }
     $http.fnReuestData(UrlRouter.getDeviceInfo,'','get',data,function (ret,err) {
       toast.hide();
       if (ret && ret.code == '200') {
         if (ret.content!= "") {
           $apis.html(content_item,'#templateMonitor',ret.content);
           $api.addCls($api.dom('.noText'), 'hide')
         }else {
           $api.removeCls($api.dom('.noText'), 'hide');
           $apis.html(content_item,'#templateMonitor',ret.content);
         }
       }
     })
   }
  //  状态
   function statusFun(t,typeC,sType) {
       var pageParam ={title:t,typeCode:typeC,statusType:sType,test:'test'}
       $event.openWin('statusListWin','statusListWin',pageParam,'');
       // $event.openTabLayout('statusList','statusList',title,pageParam);
   }
</script>
</body>
</html>
