yf_zd
/
yfwlwCut


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158
							{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link href="{% static '/lib/bootstrap-3.3.7/css/bootstrap.css' %}" rel="stylesheet">
  <link rel="stylesheet" href="{% static '/lib/font-awesome/4.5.0/css/font-awesome.css' %}">
  <link rel="stylesheet" href="{% static '/lib/css/ace.min.css' %}" />
  <link rel="stylesheet" href="{% static '/lib/css/ace-skins.min.css' %}">
  <link rel="stylesheet" href="{% static '/lib/css/ace-rtl.min.css' %}">
  <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
  <link rel="stylesheet" href="{% static '/lib/css/jquery-ui.css' %}" />
  <link rel="stylesheet" href="{% static '/css/loading.css' %}?versions=0.5.0" />

  <style type="text/css">
    body {
      overflow: hidden;
      background: #fff;
    }

    /* 返回 */

    .headerPlace {
      font-size: 22px;
      color: #418fbb;
      cursor: pointer;
    }

    .headerPlace img {
      vertical-align: middle;
      margin-right: 10px;
      margin-top: -4px;
    }

    /* 设备信息 */

    .userinfo .fa {
      font-size: 18px;
      color: #26b3ff;
      margin: 0px 5px;
    }

    .ui-slider .ui-slider-handle {
      width: 1.4em;
      height: 1.4em;
      border-radius: 50%;
    }

    .ui-slider {
      background: #fff;
    }

    .userinfoTitle {
      margin-right: 30px;
      font-size: 16px;
    }

    /* 右侧操作按钮 */

    .refresh {
      text-align: right;
    }

    .refresh button {
      padding: 2px 5px;
      border-radius: 5px;
    }

    /* 设备信息条 */

    .equipBorder {
      border: 1px solid #e8e8e8;
      box-shadow: 0px 0px 13px 0px #d9d9d9;
      margin: 10px;
      border-radius: 5px;
    }

    .equipInfo .equipItem {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .equipInfo .equipItem:after {
      position: absolute;
      content: "";
      right: 0;
      height: 30px;
      border-right: 1px solid #cdcdcd;
    }

    .haloParent {
      position: relative;
      width: 100px;
      height: 100px;
    }

    .equipInfo .txt {
      text-align: center;
      font-size: 16px;
    }

    .equipInfo .txt p {
      color: #b6b6b6;
      letter-spacing: 1px;
    }

    .halo {
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }

    .solidCircle {
      position: absolute;
      left: 50%;
      top: 50%;
      margin-top: -25px;
      margin-left: -25px;
      width: 50px;
      height: 50px;
      /* background: blue; */
      text-align: center;
      line-height: 50px;
      border-radius: 50%;
    }

    .halo1 {
      animation: anihalo1 2s 3s infinite;
    }

    .solidCircle1 {
      background: #ec6b6b;
    }

    @keyframes anihalo1 {
      0% {
        background: #f8b2b2;
        transform: scale(.3);
        opacity: 0
      }

      20% {
        background: #ec6b6b;
        transform: scale(.5);
        opacity: .5
      }

      100% {
        background: #ec6b6b;
        transform: scale(.8);
        opacity: 0
      }
    }

    .halo2 {
      animation: anihalo2 2s 3s infinite;
    }

    .solidCircle2 {
      background: #6baeec;
    }

    @keyframes anihalo2 {
      0% {
        background: #9ecaf3;
        transform: scale(.3);
        opacity: 0
      }

      20% {
        background: #6baeec;
        transform: scale(.5);
        opacity: .5
      }

      100% {
        background: #6baeec;
        transform: scale(.8);
        opacity: 0
      }
    }

    .halo3 {
      animation: anihalo3 2s 3s infinite;
    }

    .solidCircle3 {
      background: #f4bb0e;
    }

    @keyframes anihalo3 {
      0% {
        background: #fce49e;
        transform: scale(.3);
        opacity: 0
      }

      20% {
        background: #f4bb0e;
        transform: scale(.5);
        opacity: .5
      }

      100% {
        background: #f4bb0e;
        transform: scale(.8);
        opacity: 0
      }
    }

    .halo4 {
      animation: anihalo4 2s 3s infinite;
    }

    .solidCircle4 {
      background: #4ddc75;
    }

    @keyframes anihalo4 {
      0% {
        background: #9ee4b2;
        transform: scale(.3);
        opacity: 0
      }

      20% {
        background: #4ddc75;
        transform: scale(.5);
        opacity: .5
      }

      100% {
        background: #4ddc75;
        transform: scale(.8);
        opacity: 0
      }
    }

    .halo5 {
      animation: anihalo5 2s 3s infinite;
    }

    .solidCircle5 {
      background: #c279d4;
    }

    @keyframes anihalo5 {
      0% {
        background: #d5b4df;
        transform: scale(.3);
        opacity: 0
      }

      20% {
        background: #c279d4;
        transform: scale(.5);
        opacity: .5
      }

      100% {
        background: #c279d4;
        transform: scale(.8);
        opacity: 0
      }
    }

    .halo6 {
      animation: anihalo6 2s 3s infinite;
    }

    .solidCircle6 {
      background: #ff7e00;
    }

    @keyframes anihalo6 {
      0% {
        background: #f1caa2;
        transform: scale(.3);
        opacity: 0
      }

      20% {
        background: #ff7e00;
        transform: scale(.5);
        opacity: .5
      }

      100% {
        background: #ff7e00;
        transform: scale(.8);
        opacity: 0
      }
    }

    /* 设备内容 左图+右数据*/

    /* left */

    .paddingLeft {
      padding-right: 0;
    }

    .equipImg {
      height: 500px;
      background: #d9d9d9 url(./static/img/sexEquip.png) no-repeat center;
      background-size: auto 100%;
    }

    /* right */

    .paddingRight {
      padding-left: 0;
    }

    .equipRightData {
      display: flex;
      justify-content: space-around;
      align-items: center;
    }

    /* -----------svg环形图----------- */

    .chart {
      position: relative;
      display: inline-block;
      width: 120px;
      height: 120px;
      margin-top: 12px;
      margin-bottom: 12px;
      text-align: center;
    }

    .chart canvas {
      position: absolute;
      top: 0;
      left: 0;
    }

    .percent {
      display: block;
      line-height: 30px;
      z-index: 2;
      margin-top: 25%;
    }

    /* .percent:after {
    content: '';
    margin-left: 0.1em;
    font-size: .8em;
  } */

    .percent1 {
      display: block;
      line-height: 30px;
      z-index: 2;
    }

    /* -----------结束----------- */

    .equipPara {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 13px 0;
    }

    .equipPara>img {
      width: 76px;
    }

    .equipPara>div {
      min-width: 90px;
      line-height: 24px;
      font-size: 16px;
      padding-left: 20px;
    }

    .equipPara>div p:nth-child(2) {
      color: #b6b6b6;
    }

    /* 控制类 */

    input[type=checkbox].ace.ace-switch.ace-switch-5+.lbl::before {
      content: "开\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a关";
    }

    .timeCtrl {
      width: 25%;
    }

    .ctrlTitle {
      border-left: 3px solid #26b3ff;
      padding-left: 10px;
      font-size: 16px;
      font-weight: 700;
      margin: 22px 0;
    }

    /* 滑块 */

    .SliderBox {
      display: flex;
      align-items: center;
    }

    .SliderBox span {
      width: 100px;
      text-align: center;
    }

    .collocateBtn {
      margin: 20px;
      text-align: right;
    }

    @media screen and (max-width: 990px) {
      .col-xs-12.paddingLeft {
        padding-right: 15px;
      }

      .col-xs-12.paddingRight {
        padding-left: 15px;
      }
    }

    /* 设置诱芯 */
    .authInp {
      margin: 0 0 0 20px;
    }
  </style>

</head>

<body>
  <div class="content">
    <!-- <a href="tencent://message/?uin=1289853582&Site=sc.chinaz.com&Menu=yes">tencent咨询</a>   -->
    <div class="page-header">
      <span class="headerPlace" onclick="back()">
        <img src="{% static '/img/gobackIcon.png' %}" alt="">返回
      </span>

    </div>
    <div class="userinfocover">
      <div class="row ">
        <div class="col-xs-8 userinfo">
          <i class="fa fa-user-o" aria-hidden="true"></i>
          设备ID：
          <span class="userinfoTitle" id="equip_id"></span>
          设备名称：
          <span class="userinfoTitle" id="equip_name"></span>
          上报时间：
          <span class="userinfoTitle" id="upl_time"></span>
          位置：
          <span class="userinfoTitle" id="curr_area"></span>
        </div>
        <div class="col-xs-4 refresh">
          <button class="btn  btn-sm btn-info" onclick='sendexamineSIM()'>
            <i class="ace-icon fa fa-search  align-top bigger-125 icon-on-right"></i>
            SIM卡查询
          </button>
          {% if role == "superuser" %}
          <button type="button" class="btn btn-sm btn-primary" onclick="settingCore()">设置诱芯</button>
          {% endif %}
          <button type="button" class="btn btn-sm btn-success" onclick="reloadPage()">刷新</button>
          <button type="button" class="btn btn-sm btn-primary" id="operationBtn" onclick="debugFun()">调试</button>
          <button type="button" class="btn btn-sm btn-primary" id="operationBtn" onclick="operation()">操作</button>
        </div>
      </div>
      <!-- 用户调试权限 -->
      <div id="debugHandleBtns" style="display:none">
        <div style="padding: 20px; background-color: #F2F2F2;" id="">
          <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
              <div class="layui-card">
                <!-- <div class="layui-card-header">强制操作</div> -->
                <div class="layui-card-body">
                  <div style="margin-bottom: 10px;">
                    <button type="button" class="btn btn-sm btn-danger" onclick="popupFrame('开启设备','ds1')">开启</button>
                    <button type="button" class="btn btn-sm btn-danger" onclick="popupFrame('关闭设备','ds0')">关闭</button>
                    <button type="button" class="btn btn-sm btn-danger" onclick="popupFrame('重启','reboot')">重启</button>
                    <button type="button" class="btn btn-sm btn-danger"
                      onclick="popupFrame('清网','clearnet')">清网</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 管理员操作权限 -->
      <div id="handleBtns" style="display:none">
        <div style="padding: 20px; background-color: #F2F2F2;" id="">
          <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
              <div class="layui-card">
                <div class="layui-card-header">强制操作</div>
                <div class="layui-card-body">
                  <div style="margin-bottom: 10px;">
                    <button type="button" class="btn btn-sm btn-danger" onclick="popupFrame('开启设备','ds1')">开启</button>
                    <button type="button" class="btn btn-sm btn-danger" onclick="popupFrame('关闭设备','ds0')">关闭</button>
                    <button type="button" class="btn btn-sm btn-danger" onclick="popupFrame('重启','reboot')">重启</button>
                    <button type="button" class="btn btn-sm btn-danger"
                      onclick="popupFrame('清网','clearnet')">清网</button>
                    <button type="button" class="btn btn-sm btn-danger" onclick="popupFrame('升级','update')">升级</button>
                  </div>
                  <div style="margin-bottom: 10px;">
                    <button type="button" class="btn btn-sm btn-danger"
                      onclick="popupFrame('查询服务器配置','serverconf')">查询服务器配置</button>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="equipBorder">
        <div class="row equipInfo">
          <div class="col-xs-4 col-md-2">
            <div class="equipItem">
              <div class="haloParent">
                <div class="halo halo1"></div>
                <div class="solidCircle solidCircle1">
                  <img class="haloIcon" src="{% static '/img/sex_trap/sexStatus1.png' %}" alt="">
                </div>
              </div>
              <div class="txt">
                <span class="typeResult" id="equip_ds">开</span>
                <p class="typeResult">开机状态</p>
              </div>
            </div>
          </div>
          <div class="col-xs-4 col-md-2">
            <div class="equipItem">
              <div class="haloParent">
                <div class="halo halo2"></div>
                <div class="solidCircle solidCircle2">
                  <img class="haloIcon" src="{% static '/img/sex_trap/sexStatus2.png' %}" alt="">
                </div>
              </div>
              <div class="txt">
                <span class="typeResult" id="equip_ws">正常</span>
                <p class="typeResult">工作状态</p>
              </div>
            </div>
          </div>
          <div class="col-xs-4 col-md-2">
            <div class="equipItem">
              <div class="haloParent">
                <div class="halo halo3"></div>
                <div class="solidCircle solidCircle3">
                  <img class="haloIcon" src="{% static '/img/sex_trap/sexStatus3.png' %}" alt="">
                </div>
              </div>
              <div class="txt">
                <span class="typeResult" id="equip_cbs">正常</span>
                <p class="typeResult">充电状态</p>
              </div>
            </div>
          </div>
          <div class="col-xs-4 col-md-2">
            <div class="equipItem">
              <div class="haloParent">
                <div class="halo halo4"></div>
                <div class="solidCircle solidCircle4">
                  <img class="haloIcon" src="{% static '/img/sex_trap/sexStatus4.png' %}" alt="">
                </div>
              </div>
              <div class="txt">
                <span class="typeResult" id="equip_rps">正常</span>
                <p class="typeResult">雨控状态</p>
              </div>
            </div>
          </div>
          <div class="col-xs-4 col-md-2">
            <div class="equipItem">
              <div class="haloParent">
                <div class="halo halo5"></div>
                <div class="solidCircle solidCircle5">
                  <img class="haloIcon" src="{% static '/img/sex_trap/sexStatus5.png' %}" alt="">
                </div>
              </div>
              <div class="txt">
                <span class="typeResult" id="equip_tps">正常</span>
                <p class="typeResult">温控状态</p>
              </div>
            </div>
          </div>
          <div class="col-xs-4 col-md-2">
            <div class="equipItem">
              <div class="haloParent">
                <div class="halo halo6"></div>
                <div class="solidCircle solidCircle6">
                  <img class="haloIcon" src="{% static '/img/sex_trap/sexStatus6.png' %}" alt="">
                </div>
              </div>
              <div class="txt">
                <span class="typeResult" id="equip_dps">正常</span>
                <p class="typeResult">倾倒状态</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class=" col-xs-12 col-md-4 paddingLeft">
          <div class="equipBorder equipImg"></div>
        </div>
        <div class="col-xs-12 col-md-8 paddingRight">
          <div class="equipBorder equipRight">
            <div class="equipRightData">
              <div>
                <span class="chart chart1" data-percent="">
                  <span class="percent">3</span>
                  <span class="percent1">充电电压(V)</span>
                </span>
              </div>
              <div>
                <span class="chart chart2" data-percent="">
                  <span class="percent">3</span>
                  <span class="percent1">电池电压(V)</span>
                </span>
              </div>
              <div>
                <span class="chart chart3" data-percent="">
                  <span class="percent">3</span>
                  <span class="percent1">环境温度(°C)</span>
                </span>
              </div>
              <div>
                <span class="chart chart4" data-percent="">
                  <span class="percent">3</span>
                  <span class="percent1">环境湿度(RH)</span>
                </span>
              </div>
              <div>
                <span class="chart chart5" data-percent="">
                  <span class="percent">3</span>
                  <span class="percent1">红外计数值</span>
                </span>
              </div>
              <!-- <div>
                <span class="chart chart6" data-percent="">
                  <span class="percent">3</span>
                  <span class="percent1">高压计数值</span>
                </span>
              </div> -->
            </div>
          </div>
          <!-- 右下部 -->
          <div class="row">
            <div class="col-xs-12">
              <div class="col-xs-3 paddingLeft paddingRight">
                <div class="equipBorder equipPara">
                  <img src="{% static '/img/sex_trap/fx.png' %}" alt="">
                  <div>
                    <p id="wind_drec">南</p>
                    <p>风向</p>
                  </div>
                </div>
                <div class="equipBorder equipPara">
                  <img src="{% static '/img/sex_trap/fs.png' %}" alt="">
                  <div>
                    <p id="wind_sped">南</p>
                    <p>风速(M/S)</p>
                  </div>
                </div>
                <!-- <div class="equipBorder equipPara">
                  <img src="{% static '/img/sex_trap/chq.png' %}" alt="">
                  <div>
                    <p id="bt_ct">南</p>
                    <p>重启次数</p>
                  </div>
                </div> -->
              </div>
              <div class="col-xs-9 paddingLeft paddingRight">
                <div class="equipBorder">
                  <div style="padding: 0 20px;">
                    <div class="ctrlTitle">
                      时控开关
                      <label class="pull-right inline">
                        <input id="id-button-borders" type="checkbox" class="ace ace-switch ace-switch-5" />
                        <span class="lbl middle"></span>
                      </label>
                    </div>
                    <div>
                      <span>时控开始和结束时间：</span>
                      <select class="timeCtrl" name="" id="startTime"></select>
                      --
                      <select class="timeCtrl" name="" id="endTime"></select>
                    </div>
                    <div class="ctrlTitle">
                      数据上传时间间隔
                    </div>
                    <div>
                      <div class="SliderBox">
                        <span class="initVal">1</span>
                        <div class="slider" id="dtlDropTime-slider"></div>
                        <span class="sliderVal" id="dtlDropTime">60</span>
                      </div>
                    </div>
                    <div class="collocateBtn">
                      <button type="button" class="btn btn-white btn-primary" onclick="openNewPage()">查看历史数据</button>
                    </div>
                  </div>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>


    <!-- <input type="hidden" value="{{equip_id}}" id="imei"> -->
    <!-- <input type="hidden" value="" id="iccid"> -->
    <script src="{% static '/lib/js/jquery-2.1.4.min.js' %}"></script>
    <script src="{% static '/lib/bootstrap-3.3.7/js/bootstrap.js' %}"></script>
    <script src="{% static '/lib/layui/layui.all.js' %}"></script>
    <script type="text/javascript"
      src="http://api.map.baidu.com/api?v=2.0&ak=TcRPmrsiZUqdUBWoELrUArRkCRC36KMx"></script>
    <script src="{% static '/js/common.js' %}?versions=0.5.0"></script>

    <!-- <script src="{% static '/assets/js/ace.min.js' %}"></script> -->
    <!-- <script src="{% static '/lib/js/newdistpicker.js' %}" type="text/javascript" charset="utf-8"></script> -->
    <!-- <script src="{% static '/lib/js/main.js' %}" type="text/javascript" charset="utf-8"></script> -->
    <script src="{% static '/lib/js/jquery-ui.min.js' %}"></script>
    <script src="{% static '/lib/js/jquery.ui.touch-punch.min.js' %}"></script>
    <!-- <script src="{% static '/lib/js/detailsAnimat.js' %}"></script> -->
    <script src="{% static '/lib/js/coordOffset.js' %}"></script>
    <script src="{% static '/lib/js/jquery.easy-pie-chart.js' %}"></script>
    <!-- <script src="http://www.jq22.com/demo/jquery-easy-150604221240/js/jquery.easy-pie-chart.js"></script> -->
    <!-- <script src="https://cdn.bootcss.com/easy-pie-chart/2.1.6/jquery.easypiechart.js"></script> -->

    <script type="text/javascript">
      $.ajaxSetup({
        data: {
          csrfmiddlewaretoken: '{{ csrf_token }}'
        },
      });
      $(window).resize(function () {
        scrollBar()
      });
      //operation配置弹框
      function operation() {
        //页面层
        popupIndex = layer.open({
          type: 1,
          skin: 'layui-layer-rim', //加上边框
          // area: ['420px', '240px'], //宽高
          area: ["420px", '220px'],
          content: $('#handleBtns').html()
        });
      }
      $(function () {
        currpage = getQueryString('currpage') || 1;
        equipName = getQueryString('equipName') || '';
        equipId = getQueryString('equipId') || '';
        id = getQueryString('id') || '';
        // type = getQueryString('etype') || '';
        type = getQueryString('etypeA') || '';
        onoffSelect = getQueryString('onoffSelect') || '';
        // console.log(type)
        // console.log(onoffSelect)
        var htmlOPtion = '';
        for (var i = 0; i < 24; i++) {
          htmlOPtion += '<option value="' + i + '">' + i + '点</option>'
          if (i == 23) {
            $('#startTime').html(htmlOPtion);
            $('#endTime').html(htmlOPtion);
          }
        }
        $('.chart1').easyPieChart({
          barColor: '#ff6800',
          lineWidth: 5,
          size: 120,
          onStep: function (from, to, percent) {
            // $(this.el).find('.percent').text(Math.round(percent));
          }
        });
        $('.chart2').easyPieChart({
          barColor: '#5d9f2c',
          lineWidth: 5,
          size: 120,
          onStep: function (from, to, percent) {
          }
        });
        $('.chart3').easyPieChart({
          barColor: '#f4bb0e',
          lineWidth: 5,
          size: 120,
          onStep: function (from, to, percent) {
          }
        });
        $('.chart4').easyPieChart({
          barColor: '#6baeec',
          lineWidth: 5,
          size: 120,
          onStep: function (from, to, percent) {
          }
        });
        $('.chart5').easyPieChart({
          barColor: '#ff7e00',
          lineWidth: 5,
          size: 120,
          onStep: function (from, to, percent) {
          }
        });
        $('.chart6').easyPieChart({
          barColor: '#c279d4',
          lineWidth: 5,
          size: 120,
          onStep: function (from, to, percent) {
          }
        });
        $("#takePhotoTime-slider").css('width', '85%').slider({
          value: 1,
          range: "min",
          min: 0,
          max: 23,
          step: 1,
          slide: function (event, ui) {
            var val = parseInt(ui.value);
            $('#takePhotoTime').html(val);
          },
          stop: function (event, ui) {
            // console.log(turnTime)
            // console.log(ui.value)
            layui.use('layer', function () {
              var layer = layui.layer;
              layer.confirm('是否修改卷粘虫板时间?', { icon: 3, title: '提示' }, function (index) {
                //do something
                var data = {
                  ext: 'turnset',
                  turn_t: ui.value,
                }
                sendCtrlFun(data, function () {
                  turnTime = ui.value;
                })
                layer.close(index);
              }, function (index, layero) {
                $("#takePhotoTime-slider").slider('value', turnTime); //卷粘虫板时间
                $('#takePhotoTime').html(turnTime);
              });
            });
          }
        });
        scrollBar()
        getData()
      });
      $('#startTime').change(function () {
        var num = parseInt($(this).val()) + 1;
        var htmlOPtion = '';
        for (var i = num; i < 24; i++) {
          htmlOPtion += '<option value="' + i + '">' + i + '点</option>'
          if (i == 23) {
            $('#endTime').html(htmlOPtion);
          }
        }
      })
      function popupFrame(txt, msg) {
        layui.use('layer', function () {
          var layer = layui.layer;
          layer.confirm('是否' + txt + '?', { icon: 3, offset: '100px', title: '提示' }, function (index) {
            var data = {
              ext: msg
            }
            var fun = function () { };
            if (msg == 'work_tim1') {
              data = {
                ext: msg,
                st: $("#startTime").val(),
                et: $("#endTime").val()
              }
            }
            sendCtrlFun(data, fun)
            layer.close(index);
          });
        })
      }

      function sendCtrlFun(data, callback) {
        data.e_id = id;
        $.ajax({
          url: 'sex_mqtt_v1',
          type: 'post',
          data: data,
          success: function (data) {
            if (data == 0) {
              callback();
            }
          },
          error: function (type) {
            console.log(type)
          }
        })
      }

      // 获取详情数据
      var turnTime;    //数据上传时间间隔
      function getData() {
        $.ajax({
          url: 'sex_trap_detail',
          type: 'post',
          data: {
            id: id,
          },
          dataType: 'json',
          success: function (data) {
            // renderTable(processingData(data));
            // renderPage(page,data)
            renderHtml(data);
            var sex_trap = eval('(' + data.sex_trap + ')');
            turnTime = sex_trap.dat_f;
            console.log(turnTime)
          },
          error: function (type) {
            console.log(type);
          }
        })
      }
      //刷新
      function reloadPage() {
        var data = {
          ext: 'data',
        }
        var fun = function () {
          var index = layer.load(2, { time: 3 * 1000 });
          setTimeout(function () {
            getData()
          }, 3000)
        };
        sendCtrlFun(data, fun)
      }
      // 调试
      function debugFun() {
        //页面层
        popupIndex = layer.open({
          type: 1,
          title: '调试',
          offset: '100px',
          // skin: 'layui-layer-rim', //加上边框
          // area: ['420px', '240px'], //宽高
          shadeClose: true,
          area: "300px",
          content: $('#debugHandleBtns').html()
        });
      }
      function getQueryString(name) {
        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        let url = window.location.href.split('?')[1].match(reg);
        // console.log(url)
        if (url != null) {
          return decodeURI(url[2])//decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。
        } else {
          return null
        }
      }

      function back() {
        // var url = 'sex_trap_view?equipId=' + equipId + '&equipName=' + equipName + '&currpage=' + currpage + '&etype=' + type + '&onoffSelect=' + onoffSelect;
        var url = 'sex_trap_view?equipId=' + equipId + '&equipName=' + equipName + '&currpage=' + currpage + '&etypeA=' + type + '&onoffSelect=' + onoffSelect + '&etype=SEX_TRAP_1';
        location.href = url;
      }

      // 渲染界面
      function renderHtml(data) {
        var stat = eval('(' + data.sex_trap + ')');
        if (stat.lng > 999) {
          var lng = Math.floor(stat.lng / 100) + ((stat.lng % 100) / 60);
          var lat = Math.floor(stat.lat / 100) + ((stat.lat % 100) / 60);
        } else {
          var lng = Number(stat.lng);
          var lat = Number(stat.lat);
        }
        var lng1 = wgs84togcj02(lng, lat);
        var lng2 = gcj02tobd09(lng1[0], lng1[1]);
        var pt = new BMap.Point(lng2[0], lng2[1]);
        // 获取位置
        var geoc = new BMap.Geocoder();
        geoc.getLocation(pt, function (rs) {
          var addComp = rs.addressComponents;
          $('#curr_area').html(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
        })
        $('#equip_id').html(id);
        $('#equip_name').html(data.equip_name || '无');
        $('#upl_time').html(data.upl_time);
        var sex_trap = eval('(' + data.sex_trap + ')');
        console.log(sex_trap);
        $('#equip_ds').html(sex_trap.ds ? '开启' : '关闭');
        $('#equip_ws').html(sex_trap.ws ? '工作' : '待机');
        $('#equip_cbs').html(sex_trap.cs ? '充电中' : '未充电');
        $('#equip_rps').html(sex_trap.rps ? '雨控' : '正常');
        $('#equip_tps').html(sex_trap.tps ? '温控' : '正常');
        $('#equip_dps').html(sex_trap.dps ? '倾倒' : '正常');
        var cv = parseInt(sex_trap.cv / 1000 / 30 * 100); //充电电压  最大值40(2/40)
        $('.chart1').data('easyPieChart').update(cv);
        $('.chart1').find('.percent').html(sex_trap.cv / 1000);
        var bv = parseInt(sex_trap.bv / 1000 / 20 * 100); //电池电压  最大值20
        $('.chart2').data('easyPieChart').update(bv);
        $('.chart2').find('.percent').html(sex_trap.bv / 1000);
        var at = parseInt(sex_trap.at / 120 * 100); //环境温度  最大值120
        $('.chart3').data('easyPieChart').update(at);
        $('.chart3').find('.percent').html(sex_trap.at);
        var ah = parseInt(sex_trap.ah / 99 * 100); //环境湿度  最大值99
        $('.chart4').data('easyPieChart').update(ah);
        $('.chart4').find('.percent').html(sex_trap.ah);
        var hwcnt = parseInt(sex_trap.infr_ct / 6534 * 100); //红外计数  最大值6534
        $('.chart5').data('easyPieChart').update(hwcnt);
        $('.chart5').find('.percent').html(sex_trap.infr_ct);
        // var volcnt = parseInt(sex_trap.volt_ct / 6534 * 100); //高压计数  最大值6534
        // $('.chart6').data('easyPieChart').update(volcnt);
        // $('.chart6').find('.percent').html(sex_trap.volt_ct);
        console.log(sex_trap);
        if (sex_trap.wind_drec == 0) {
          var wind_drec = '北风';
        } else if (sex_trap.wind_drec == 1) {
          var wind_drec = '东北风';
        } else if (sex_trap.wind_drec == 2) {
          var wind_drec = '东风';
        } else if (sex_trap.wind_drec == 3) {
          var wind_drec = '东南风';
        } else if (sex_trap.wind_drec == 4) {
          var wind_drec = '南风';
        } else if (sex_trap.wind_drec == 5) {
          var wind_drec = '西南风';
        } else if (sex_trap.wind_drec == 6) {
          var wind_drec = '西风';
        } else if (sex_trap.wind_drec == 7) {
          var wind_drec = '西北风';
        } else {
          var wind_drec = '--';
        }
        $("#dtlDropTime-slider").slider('value', sex_trap.dat_f); //数据上传时间间隔
        $('#dtlDropTime').html(sex_trap.dat_f);
        $('#wind_drec').html(wind_drec);//风向
        $('#wind_sped').html(sex_trap.wind_sped);//风速
        $('#bt_ct').html(sex_trap.bt_ct);//重启次数
        if (sex_trap.ts == 1) {
          $('#id-button-borders').attr('checked', 'checked')
        } else {
          $('#id-button-borders').attr('checked', false)
        }

      }

      // 切换
      $('#id-button-borders').on('change', function () {
        console.log($('#id-button-borders').prop('checked'));
        if ($('#id-button-borders').prop('checked')) {
          popupFrame('开启时控开关', 'work_tim1')
        } else {
          popupFrame('关闭时控开关', 'work_tim0')
        }
      });
      // 1数据上传时间间隔
      $("#dtlDropTime-slider").css('width', '85%').slider({
        value: 1,
        range: "min",
        min: 1,
        max: 60,
        step: 1,
        slide: function (event, ui) {
          var val = parseInt(ui.value);
          $('#dtlDropTime').html(val);
        },
        stop: function (event, ui) {
          layui.use('layer', function () {
            var layer = layui.layer;
            layer.confirm('是否修改数据上传时间间隔?', { icon: 3, title: '提示' }, function (index) {
              var data = {
                ext: 'data_tim',
                dat_f: ui.value,
              }
              sendCtrlFun(data, function () {
                turnTime = ui.value;
              })
              layer.close(index);
            }, function (index, layero) {
              console.log(123456);
              $("#dtlDropTime-slider").slider('value', turnTime); //卷粘虫板时间
              $('#dtlDropTime').html(turnTime);
              layer.close(index);
            });
          });
        }
      });
      // 2拍照时间间隔
      // $("#takePhotoTime-slider").css('width', '85%').slider({
      //   value: 1,
      //   range: "min",
      //   min: 1,
      //   max: 20,
      //   step: 1,
      //   slide: function (event, ui) {
      //     var val = parseInt(ui.value);
      //     $('#takePhotoTime').html(val);
      //   }
      // });
      // 查看历史数据
      function openNewPage() {
        // window.location.href = 'sex_trap_data?id=' + id + '&currpage=' + currpage + '&equipName=' + equipName + '&equipId=' + equipId + '&etype=SEX_TRAP_1';
        // window.location.href = 'sex_trap_data?id=' + id + '&currpage=' + currpage + '&equipName=' + equipName + '&equipId=' + equipId + '&etype=' + type + '&onoffSelect' + onoffSelect;
        window.location.href = 'sex_trap_data?id=' + id + '&currpage=' + currpage + '&equipName=' + equipName + '&equipId=' + equipId + '&etype=SEX_TRAP_1' + '&onoffSelect' + onoffSelect + '&etypeA=' + type;
      }


      //设置诱芯
      function settingCore() {
        layer.open({
          title: '设置诱芯'
          , content: '<input class="authInp" id="authInp" type="text">'
        });

        layer.open({
          title: '设置诱芯'
          , content: '<input class="authInp" id="authInp" type="text">'
          , btn: ['确定', '取消']
          , btnAlign: 'c' //按钮居中
          , shade: .3 //不显示遮罩
          , yes: function () {
            var pest = $('.authInp').val()
            $.ajax({
              url: 'ybq_pest_set',
              type: 'post',
              data: {
                e_id: id,
                pest: pest
              },
              beforeSend: function (XMLHttpRequest) {
                layer.msg('请求中，请稍候……', { icon: 16, shade: 0.01, shadeClose: false, time: 60000 });
              },
              success: function (data) {
                if (data == 0) {
                  layer.msg('设置成功！！', { icon: 1, shade: 0.01, shadeClose: false, time: 1000 })
                } else {
                  layer.msg('设置失败！');
                }
              },
              error: function (type) {
                layer.msg('设置失败！');
              }
            })
          }
        });
      }
    </script>
</body>

</html>