jifuning
/
zhihui_kuangshan_app


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
							<!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">
    <!-- <script src="http://at.alicdn.com/t/font_1226884_f65dqkm6tpn.js" charset="utf-8"></script> -->
    <style>
        /*.icon {*/
           /*width: 20px; height: 20px;*/
           /*vertical-align: -0.15em;*/
           /*fill: currentColor;*/
            /*overflow: hidden;*/
            /*color: #000;*/
        /*}*/
        body{
            background: #fff;
        }
        .status_itme{
            padding: 25px;
        }
        .status_itme li{
            text-align: center;
            width: 62px;
            height: 62px;
            padding: 10px 5px;
            color: #ffffff;
            font-size: 14px;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .status_itme li p{
            color: #ffffff;
            font-size: 16px;
        }
        .status_itme li:nth-child(1){
            background: #2c3e50;
        }
        .status_itme li:nth-child(2){
            background: #e74c3c;
        }
        .status_itme li:nth-child(3){
            background: #27ae60;
        }
        .status_itme li:nth-child(4){
            background: #2873ff;
        }
        .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="status_itmes">
        <ul class="status_itme flex-space" id="status_itme">

        </ul>
    </div>
    <div class="api_line" style="height: 2px;"></div>
    <div class="content_items">
         <ul class="content_item" id="content_item">
             <!-- <li class="relative after-border" onclick="monitorDetaile('一氧化碳')">
                 <div class="status_title flex-space">
                    <i style="background: url(../../image/an.png) no-repeat;background-size: cover"></i>
                     <span>一氧化碳</span>
                 </div>
                 <div class="status_text flex-wrap">
                      <div class="col flex-con">
                          <span>正常</span>
                          <span>400个</span>
                      </div>
                     <div class="col flex-con">
                         <span>正常</span>
                         <span>400个</span>
                     </div>
                     <div class="col flex-con">
                         <span>正常</span>
                         <span>400个</span>
                     </div>
                     <div class="col flex-con">
                         <span>正常</span>
                         <span>400个</span>
                     </div>
                 </div>
             </li> -->
         </ul>
    </div>
</div>
<script type="text/template" id="templateStatus">
  {{for(var i = 0;i<it.length;i++) { }}
    <li onclick="statusFun('{{=it[i].name}}','{{=it[i].type}}')">
        <p>{{=it[i].name}}</p>
        <span>{{=it[i].count}}个</span>
    </li>
  {{ } }}
</script>
<script type="text/template" id="templateMonitor">
    {{~it:value}}
      <li class="relative after-border">
          <div class="status_title flex-space" onclick="monitorDetaile('{{=value.typeCodeDesc}}','')">
             <i style="background: url('http://jiewei-icon.oss-cn-beijing.aliyuncs.com/safe-system/{{=value.typeCode}}.png') no-repeat;background-size: cover"></i>
              <span>{{=value.typeCodeDesc}}</span>
          </div>
          <div class="status_text flex-wrap">
            {{ for(var i = 0;i<value.normalCount.length;i++) { }}
              <div class="col flex-con" onclick="sonTrmeSeacrh('{{=value.typeCodeDesc}}','{{=value.normalCount[i].type}}')">
                  <span>{{=value.normalCount[i].name}}</span>
                  <span>{{=value.normalCount[i].count}}个</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 site='aq2';
    apiready = function () {
      //alert('ss')
      monitorListFun();
      // simulationTotal();
    };
    // 模拟量
    function simulationTotal() {
      $http.fnReuestData(UrlRouter.simulationTotal,'','post',{site:site},function(ret,err){
        console.log(JSON.stringify(ret));
        if (ret && ret.code === 0) {

          toast.hide();
          $apis.html(status_itme,'#templateStatus',ret.data);
        }
      })
    }

    function monitorListFun (){

      $http.fnReuestData(UrlRouter.simulationTotal,'','post',{site:site},function(ret,err){
        toast.hide();
        if (ret && ret.code === 0) {
          $apis.html(status_itme,'#templateStatus',ret.total);
          $apis.html(content_item,'#templateMonitor',ret.data);
          $api.removeCls($api.dom('.api_line'), 'show');
        }else if (ret.code == 1) {
          $api.addCls($api.dom('.api_line'), 'hide');
          api.toast({
              msg: '网络请求超时,请稍后重试',
              duration: 2000,
              location: 'bottom'
          });
        }
      })
    }
    // 详情
    function monitorDetaile(t,sType) {
      var pageParam ={title:t,statusType:sType}
      // $event.openTabLayout('monitorDetaile','monitorDetaile',title,pageParam);
      $event.openWin('monitorDetaileWin2','monitorDetaileWin2',pageParam,'');
    }
    //子项状态查询
    function sonTrmeSeacrh(t,sType) {
      var pageParam ={title:t,statusType:sType}
      $event.openWin('monitorDetaileWin2','monitorDetaileWin2',pageParam,'');
      // $event.openTabLayout('monitorDetaile','monitorDetaile',title,pageParam);
    }
    // 状态
    function statusFun(t,sType) {
        var pageParam ={title:t,statusType:sType,type:'simulation'}
        $event.openWin('statusListWin2','statusListWin2',pageParam,'');
        // $event.openTabLayout('statusList','statusList',title,pageParam);
    }
</script>
</body>
</html>