<!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" href="../../css/style.css" />
    <style>
      body,
      html {
        background: #009fe8;
      }
      .api_layout {
        padding: 7px;
      }
      .added-tax {
        background: #fff;
        font-size: 15px;
        color: #232627;
        border-radius: 10px;
        padding-top: 10px;
        padding-bottom: 5px;
        box-sizing: border-box;
        margin-bottom: 10px;
      }
      .added-tax label {
        margin-bottom: 8px;
      }
      .added-tax i {
        width: 32px;
        height: 34px;
        background: url('../../icon/gmcd.png') center no-repeat;
        background-size: contain;
        margin-right: 10px;
      }
      .added-tax-info {
        padding: 0 10px;
      }
      .added-tax-info li {
        position: relative;
        padding: 12px 0;
        align-items: flex-start;
      }
      .added-tax-info span {
        font-size: 14px;
        color: #7d7c7c;
        width: 56px;
      }
      .added-tax-info p {
        font-size: 14px;
        width: 77%;
        font-weight: 500;
      }
      .bg-ico {
        position: relative;
        width: 100%;
        height: 145px;
        background: url('../../image/sewage_bg.png') center no-repeat;
        background-size: cover;
      }
      .sewage-item {
        text-align: center;
      }
      .sewage-item:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: #e8e9ea;
      }
      .sewage-item span {
        color: #232627;
      }

      .sewage-item span:first-child {
        width: 50%;
      }
      .sewage-item p {
        width: 30%;
        background: #8adaff;
      }
      .sewage-item span:last-child {
        width: 20%;
      }
      .added-tax-info .item-title {
        padding-left: 7px;
      }
      .item-title {
        font-weight: bold;
      }
      .item-title:after {
        content: '';
        position: absolute;
        top: 10px;
        left: 0;
        width: 3px;
        height: 60%;
        background: #009fe8;
      }
      .added-tax-info .item-title:first-child:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: #e8e9ea;
      }
      .box i {
        width: 32px;
        height: 34px;
        background: url('../../icon/klc.png') center no-repeat;
        background-size: contain;
        margin-right: 10px;
      }
      .date {
        position: absolute;
        bottom: 7px;
        right: 7px;
        color: #fff;
        font-size: 15px;
      }
    </style>
  </head>
  <body>
    <div class="bg-ico">
      <p class="date"></p>
    </div>
    <div class="api_layout" id="incoice_wrap"></div>
  </body>
</html>
<script type="text/template" id="templateInvoice">
  <div class="added-tax">
      <label class="flex-center">
          <i></i>
          <span>高密沉淀</span>
      </label>
      <ul class="added-tax-info">
          <li class="item-title">矸石山调节池液位</li>
          <li class="sewage-item flex-start">
              <span>矸石山调节池A：</span>
              <p>{{=it.gss_TJC_A}}</p>
              <span>m</span>
          </li>
          <li class="sewage-item flex-start">
              <span>矸石山调节池B：</span>
              <p>{{=it.gss_TJC_B}}</p>
              <span>m</span>
          </li>
          <li class="item-title" style="margin-top:15px">外排水池液位</li>
          <li class="sewage-item flex-start">
              <span>外排水池A液位：</span>
              <p>{{=it.wpsc_YW_A}}</p>
              <span>m</span>
          </li>
          <li class="sewage-item flex-start">
              <span>外排水池B液位：</span>
              <p>{{=it.wpsc_YW_B}}</p>
              <span>m</span>
          </li>
      </ul>
  </div>
  <div class="added-tax box">
      <label class="flex-center">
          <i></i>
          <span>快滤池</span>
      </label>
      <ul class="added-tax-info">
          <li class="sewage-item flex-start">
              <span>滤池出水流量：</span>
              <p>{{=it.lccs_LL}}</p>
              <span>m3/h</span>
          </li>
          <li class="sewage-item flex-start">
              <span>滤池出水流量累积：</span>
              <p>{{=it.lccs_LL_LJ}}</p>
              <span>m3</span>
          </li>
          <li class="sewage-item flex-start">
              <span>矿井水进水瞬时流量：</span>
              <p>{{=it.kjs_JSSS_LL}}</p>
              <span>m3/h</span>
          </li>
          <li class="sewage-item flex-start">
              <span>矿井水进水流量累积：</span>
              <p>{{=it.ksc_JSLL_LJ}}</p>
              <span>m3</span>
          </li>
      </ul>
  </div>
</script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/doT.min.js"></script>
<script src="../../script/config.js" charset="utf-8"></script>
<script type="text/javascript">
  apiready = function () {
    $api.html($api.dom('.date'), getNowFormatDate());
    setInterval(function () {
      $api.html($api.dom('.date'), getNowFormatDate());
    }, 1000);
    $apis.UILoading('', 'rgba(255,255,255,.5)');
    getGdWsclDataNewList();
  };
  function getGdWsclDataNewList() {
    $http.fnReuestDataNologing(
      jinfengUrlRouter.getGdWsclDataNewList,
      '',
      'get',
      '',
      function (ret, err) {
        if (ret.status === 20000) {
          $apis.html(incoice_wrap, '#templateInvoice', ret.data);
          $apis.CloseUILoading();
        }
      }
    );
  }
</script>
