<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>站点列表</title>
  <link rel="stylesheet" href="../layui/css/layui.css">
  <link type="text/css" rel="styleSheet" href="../style/common.css">
  </link>
  <link type="text/css" rel="styleSheet" href="../style/siteList.css">

  </link>
  <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/echarts/4.2.1-rc.2/echarts.min.js"></script>
  <script type="text/javascript" src="../theme/purple-passion.js"></script>
  <script type="text/javascript" src="../js/iconfont.js"></script>
  <script type="text/javascript" src="../layui/layui.js"></script>
  <script src="../js/template-web.js"></script>
  <script type="text/javascript" src="../js/common.js"></script>
  <script type="text/javascript" src="../js/siteList.js"></script>

  <script>
    var whdef = 100 / 1920;// 表示1920的设计图,使用100PX的默认值
    var wH = window.innerHeight;// 当前窗口的高度
    var wW = window.innerWidth;// 当前窗口的宽度
    var rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
    $('html').css('font-size', rem + "px");

    layui.use(['form'], function () {
      var form = layui.form;
    });
  </script>
</head>

<body>
  <div class="nav" id='nav'>
    <a href="./index.html">运行监控</a>
    <a href="./management.html">经营监控</a>
    <a href="./warnMonitor.html">预警监控</a>
    <svg class="icon navLockIcon" aria-hidden="true" id="lockBtn">
      <use xlink:href="#icon-lock-line"></use>
    </svg>

  </div>

  <div class="siderWrap" id="siderWrap" data-visible='false'>
    <div class="siderBtn" id="siderBtn">
      <svg class="icon siderBtnIcon" aria-hidden="true">
        <use xlink:href="#icon-zuojiantou"></use>
      </svg>
    </div>
    <div class="sider" id="sider">
      <div class="clearfix">
        <div class="siderHeader">监控管理气站</div>
        <div class="siderGeoBtn" id="siderGeoBtn">坐标图</div>
      </div>
      <div class="searchBox">
        <svg class="baiyanIcon menuIcon" aria-hidden="true">
          <use xlink:href="#icon-caidan"></use>
        </svg>
        <input class="searchInput" placeholder="输入关键字" />
        <svg class="baiyanIcon searchIcon" aria-hidden="true">
          <use xlink:href="#icon-xiazai17"></use>
        </svg>
      </div>

      <h5 class="title2 mgt35">全国站点监控总量</h5>
      <div class="dashLine"></div>

      <div class="dataStatistics">
        <div class="digit_set"></div>
        <div class="digit_set"></div>
        <div class="digit_set"></div>
        <div class="digit_set set_last"></div>
      </div>
      <!-- 具体监控描述 -->
      <div class="siteNumWrapper clearfix">
        <div>华东：123</div>
        <div>东北：123</div>
        <div>西北：123</div>
      </div>

      <h5 class="title2 mgt17">全站今日累计报警（3）</h5>
      <div class="dashLine"></div>
      <div class="warningBox clearfix">
        <div>
          <span>运行报警</span>
          <span>（3）</span>
        </div>
        <div>
          <span>设备超期报警</span>
          <span>（3）</span>
        </div>
        <div>
          <span>维修超期报警</span>
          <span>（3）</span>
        </div>
      </div>
      <div class="mgt17">
        <h5 class="title2">故障总量</h5>
        <span class="oneyear">2018年</span>
        <span class="twoyear">2019年</span>
      </div>
      <div class="dashLine"></div>

      <!-- 柱状图1 -->
      <div id="barCharts1"></div>

      <h5 class="title2 mgt17">全年故障处理完成率</h5>
      <div class="dashLine"></div>
      <!-- 饼图1 -->
      <div id="pieCharts1"></div>
    </div>
  </div>

  <!-- LNG按钮 -->
  <div id="lngBtn" data-show="false">
    <div id="lngBtnHidden">LNG</div>
    <div id="lngBtnShow">
      <svg class="icon shouqiIcon" aria-hidden="true">
        <use xlink:href="#icon-zuojiantou"></use>
      </svg>
      <a class="btn private" href="./siteList.html">站点列表</a>
      <a class="btn private">设备列表</a>
      <a class="btn default">定制</a>
    </div>
  </div>

  <!-- 具体页面内容 -->
  <div class="siteList">
    <div class="siteItemBox">
      <div class="siteItem">
        <div class="imgWrap">
          <img src="../images/demo.jpg" />
        </div>
        <div class="clearfix info">
          <div class="name">众信源浦村加气站</div>
          
          <div class="success">
            <img src="../images/chenggong.png"/>
            <span>80%</span>
          </div>
          <div class="error">
              <img src="../images/shibai.png"/>
              <span>80%</span>
            </div>
        </div>
      </div>
      
    </div>
    
  </div>

</body>

<script type="text/html" id="tpl1">
{{each list}}  
  <div class="siteItemBox">
    <div class="siteItem">
      <div class="imgWrap">
        <img src="../images/demo.jpg" />
      </div>
      <div class="clearfix info">
        <div class="name">众信源浦村加气站</div>
        <div class="success">
          <img src="../images/chenggong.png"/>
          <span>80%</span>
        </div>
        <div class="error">
            <img src="../images/shibai.png"/>
            <span>80%</span>
        </div>
      </div>
    </div>
  </div>
{{/each}}
</script>

</html>