jifuning
/
xinxi_zhongxin_app


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
							<!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;
      }
      .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:first-child {
        color: #97a3b4;
      }
      .status_text span {
        display: block;
        font-size: 14px;
      }
      .status_text .col {
        text-align: center;
        padding-top: 14px;
      }
    </style>
  </head>
  <body>
    <div class="api_layout">
      <div class="status_itmes">
        <ul class="status_itme flex-space" id="status_itme">
          <!-- <li onclick="statusFun('正常','')">
                <p>正常</p>
                <span>400个</span>
            </li>
            <li onclick="statusFun('报警','')">
                <p>报警</p>
                <span>400</span>
            </li>
            <li onclick="statusFun('标校','')">
                <p>标校</p>
                <span>400</span>
            </li>
            <li onclick="statusFun('故障','')">
                <p>故障</p>
                <span>400</span>
            </li> -->
        </ul>
      </div>
      <div class="api_line" style="height: 3px;"></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}}')" class="{{=it[i].type}}Bg">
            <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 class="{{=value.normalCount[i].type}}">{{=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();
      apiready = function () {
        monitorListFun();
      };
      function monitorListFun() {
        $http.fnReuestData(
          jinfengUrlRouter.sluicetTotal,
          '',
          'post',
          '',
          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 {
              $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('monitorDetaileWin', 'monitorDetaileWin', pageParam, '');
      }
      //子项状态查询
      function sonTrmeSeacrh(t, sType) {
        var pageParam = {title: t, statusType: sType};
        $event.openWin('monitorDetaileWin', 'monitorDetaileWin', pageParam, '');
        // $event.openTabLayout('monitorDetaile','monitorDetaile',title,pageParam);
      }
      // 状态
      function statusFun(t, sType) {
        var pageParam = {title: t, statusType: sType, type: 'sluice'};
        $event.openWin('statusListWin', 'statusListWin', pageParam, '');
        // $event.openTabLayout('statusList','statusList',title,pageParam);
      }
    </script>
  </body>
</html>