yf_zd
/
qxzSy


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396
							{% 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.4" />

  <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 0;
      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: 408px;
      background: #d9d9d9 url(./static/img/sexEquip2.png) no-repeat center;
      background-size: auto 100%;
    }

    /* right */

    .paddingRight {
      padding-left: 0;
    }

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

    .equipRightData>div {
      text-align: center;
    }

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

    .chart {
      position: relative;
      display: inline-block;
      width: 120px;
      height: 120px;
      margin-top: 11px;
      margin-bottom: 11px;
      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: 57px;
    }

    .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: 25px 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;
      }

      .equipImg {
        height: 284px;
      }
    }

    .layui-form-label {
      /* width: 80px;
      display: inline-block;
      float: inherit;*/
      padding: 10px 0;
    }

    /* 查看历史记录 */
    .intoBtn {
      margin-bottom: 20px;
      text-align: center;
    }

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

</head>

<body>
  <div class="content">
    <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-12 col-sm-8 userinfo">
          <i class="fa fa-user-o" aria-hidden="true"></i>
          设备编号：
          <span class="userinfoTitle" id="devNum"></span>
          设备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="csq"></span>
          位置：
          <span class="userinfoTitle" id="curr_area"></span>
        </div>
        <div class="col-xs-12 col-sm-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="debugBtn" onclick="debugFun()">调试</button>
          {% if role == "superuser" or role == "staff" %}
          <button type="button" class="btn btn-sm btn-primary" id="operationBtn" onclick="operation()">操作</button>
          {% endif %}

        </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('开启设备',7)">开启</button>
                    <button type="button" class="btn btn-sm btn-danger" onclick="popupFrame('关闭设备',8)">关闭</button>
                    <button type="button" class="btn btn-sm btn-danger" onclick="popupFrame('重启',1)">重启</button>
                  </div>
                  <div style="margin-bottom: 10px;">
                    <button type="button" class="btn btn-sm btn-danger" onclick="popupFrame('开启卷粘虫带',5)">卷粘虫带</button>
                    <button type="button" class="btn btn-sm btn-danger" onclick="popupFrame('拍照',4)">拍照</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('重启',1)">重启</button>
                    <button type="button" class="btn btn-sm btn-danger" onclick="popupFrame('升级',2)">升级</button>
                    <button type="button" class="btn btn-sm btn-danger"
                      onclick="popupFrame('查询mqtt网络配置',3)">mqtt网络配置</button>
                  </div>
                  <div>
                    <button type="button" class="btn btn-sm btn-danger" onclick="popupFrame('拍照',4)">拍照</button>
                    <button type="button" class="btn btn-sm btn-danger" onclick="popupFrame('开启卷粘虫带',5)">卷粘虫带</button>
                    <button type="button" class="btn btn-sm btn-danger" onclick="popupFrame('重新上电',6)">重新上电</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        <!-- 状态 -->
        <div class="col-xs-12">
          <div class="equipBorder">
            <div class="row equipInfo">
              <div class="col-xs-6 col-md-4 col-lg-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-6 col-md-4 col-lg-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-6 col-md-4 col-lg-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_cs">正常</span>
                    <p class="typeResult">充电状态</p>
                  </div>
                </div>
              </div>
              <div class="col-xs-6 col-md-4 col-lg-2">
                <div class="equipItem">
                  <div class="haloParent">
                    <div class="halo halo6"></div>
                    <div class="solidCircle solidCircle6">
                      <img class="haloIcon" src="{% static '/img/sex_trap/sexStatus7.png' %}" alt="">
                    </div>
                  </div>
                  <div class="txt">
                    <span class="typeResult" id="equip_bs">正常</span>
                    <p class="typeResult">电池状态</p>
                  </div>
                </div>
              </div>
              <div class="col-xs-6 col-md-4 col-lg-2">
                <div class="equipItem">
                  <div class="haloParent">
                    <div class="halo halo4"></div>
                    <div class="solidCircle solidCircle4">
                      <img class="haloIcon" src="{% static '/img/sex_trap/sexStatus5.png' %}" alt="">
                    </div>
                  </div>
                  <div class="txt">
                    <span class="typeResult" id="equip_cpuTmp">开</span>
                    <p class="typeResult">CPU温度</p>
                  </div>
                </div>
              </div>
              <div class="col-xs-6 col-md-4 col-lg-2">
                <div class="equipItem">
                  <div class="haloParent">
                    <div class="halo halo5"></div>
                    <div class="solidCircle solidCircle5">
                      <img class="haloIcon" src="{% static '/img/haloIcon4.png' %}" alt="">
                    </div>
                  </div>
                  <div class="txt">
                    <span class="typeResult" id="equip_dver">正常</span>
                    <p class="typeResult">软件版本</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 设备图 -->
        <div class=" col-xs-4 col-md-3">
          <div class="equipBorder equipImg"></div>
        </div>
        <!-- 设备状态圈圈图 -->
        <div class="col-xs-8 col-md-9 paddingRight">
          <div class="equipBorder equipRight">
            <div class="equipRightData row">
              <div class="col-xs-6 col-md-3">
                <span class="chart chart1" data-percent="">
                  <span class="percent">3</span>
                  <span class="percent1">充电电压(V)</span>
                </span>
              </div>
              <div class="col-xs-6 col-md-3">
                <span class="chart chart2" data-percent="">
                  <span class="percent">3</span>
                  <span class="percent1">电池电压(V)</span>
                </span>
              </div>
              <div class="col-xs-6 col-md-3">
                <span class="chart chart3" data-percent="">
                  <span class="percent">3</span>
                  <span class="percent1">环境温度(°C)</span>
                </span>
              </div>
              <div class="col-xs-6 col-md-3">
                <span class="chart chart4" data-percent="">
                  <span class="percent">3</span>
                  <span class="percent1">环境湿度(RH)</span>
                </span>
              </div>
              <!-- <div class="col-xs-4 col-md-2">
                <span class="chart chart5" data-percent="">
                  <span class="percent">3</span>
                  <span class="percent1">红外计数值</span>
                </span>
              </div>
              <div class="col-xs-4 col-md-2">
                <span class="chart chart6" data-percent="">
                  <span class="percent">3</span>
                  <span class="percent1">高压计数值</span>
                </span>
              </div> -->
            </div>
          </div>

        </div>
        <!-- 控制区域 -->
        <div class="col-xs-12 col-md-9 paddingRight">
          <div class="col-xs-12 col-sm-6 paddingLeft paddingRight">
            <div class="equipBorder">
              <div style="padding:10px 15px;min-height: 240px;">
                <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">20</span>
                  </div>
                </div>
                <div class="ctrlTitle">
                  卷粘虫板时间
                </div>
                <div>
                  <div class="SliderBox">
                    <span class="initVal">1</span>
                    <div class="slider" id="takePhotoTime-slider"></div>
                    <span class="sliderVal" id="takePhotoTime">20</span>
                  </div>
                </div>
              </div>

            </div>
          </div>
          <div class="col-xs-12 col-sm-4  paddingLeft paddingRight">
            <div class="equipBorder">
              <div style="padding:10px 15px;min-height: 240px;">
                <div class="ctrlTitle">
                  定时拍照循环工作时间
                </div>
                <div>
                  <form class="layui-form" action="" lay-filter="selectObj">
                    <div class="layui-form-item">
                      <label class="layui-form-label">拍照时刻</label>
                      <div class="layui-input-block">
                        <select name="takePhotoTime" lay-verify="" lay-search>
                          <option value="0">0点</option>
                          <option value="1">1点</option>
                          <option value="2">2点</option>
                          <option value="3">3点</option>
                          <option value="4">4点</option>
                          <option value="5">5点</option>
                          <option value="6">6点</option>
                          <option value="7">7点</option>
                          <option value="8">8点</option>
                          <option value="9">9点</option>
                          <option value="10">10点</option>
                          <option value="11">11点</option>
                          <option value="12">12点</option>
                          <option value="13">13点</option>
                          <option value="14">14点</option>
                          <option value="15">15点</option>
                          <option value="16">16点</option>
                          <option value="17">17点</option>
                          <option value="18">18点</option>
                          <option value="19">19点</option>
                          <option value="20">20点</option>
                          <option value="21">21点</option>
                          <option value="22">22点</option>
                          <option value="23">23点</option>
                        </select>
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <label class="layui-form-label">拍照间隔</label>
                      <div class="layui-input-block">
                        <select name="takePhotoInterval" lay-verify="" lay-search>
                          <option value="1">1</option>
                          <option value="2">2</option>
                          <option value="3">3</option>
                          <option value="4">4</option>
                          <option value="6">6</option>
                          <option value="8">8</option>
                          <option value="12">12</option>
                          <option value="24">24</option>
                        </select>
                      </div>
                    </div>


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

            </div>
          </div>
          <div class="col-xs-12 col-sm-2  paddingLeft paddingRight">
            <div class="equipBorder">
              <div style="padding:10px 15px;min-height: 240px;">
                <div class="ctrlTitle">
                  记录
                </div>
                <div>
                  <div class="intoBtn">
                    <button type="button" class="btn btn-white btn-primary" onclick="openNewPage(1)">查看历史图片</button>
                  </div>
                  <div class="intoBtn">
                    <button type="button" class="btn btn-white btn-primary" onclick="openNewPage(2)">查看历史数据</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>

    <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.4"></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">
      var pic_t //拍照时刻
      var pic_f  //拍照间隔
      $.ajaxSetup({
        data: {
          csrfmiddlewaretoken: '{{ csrf_token }}'
        },
      });
      $(window).resize(function () {
        scrollBar()
      });

      // 调试
      function debugFun() {
        //页面层
        popupIndex = layer.open({
          type: 1,
          title: '调试',
          offset: '100px',
          // skin: 'layui-layer-rim', //加上边框
          // area: ['420px', '240px'], //宽高
          shadeClose: true,
          area: "300px",
          content: $('#debugHandleBtns').html()
        });
      }
      //operation配置弹框
      function operation() {
        //页面层
        popupIndex = layer.open({
          type: 1,
          title: '控制',
          offset: '100px',
          shadeClose: true,
          // skin: 'layui-layer-rim', //加上边框
          // area: ['420px', '240px'], //宽高
          area: "300px",
          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)
        $('.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) {
            // $(this.el).find('.percent').text(Math.round(percent));
          }
        });
        $('.chart3').easyPieChart({
          barColor: '#f4bb0e',
          lineWidth: 5,
          size: 120,
          onStep: function (from, to, percent) {
            // $(this.el).find('.percent').text(Math.round(percent));
          }
        });
        $('.chart4').easyPieChart({
          barColor: '#6baeec',
          lineWidth: 5,
          size: 120,
          onStep: function (from, to, percent) {
            // $(this.el).find('.percent').text(Math.round(percent));
          }
        });
        $('.chart5').easyPieChart({
          barColor: '#ff7e00',
          lineWidth: 5,
          size: 120,
          onStep: function (from, to, percent) {
            $(this.el).find('.percent').text(Math.round(percent));
          }
        });
        $('.chart6').easyPieChart({
          barColor: '#c279d4',
          lineWidth: 5,
          size: 120,
          onStep: function (from, to, percent) {
            $(this.el).find('.percent').text(Math.round(percent));
          }
        });
        scrollBar()
        getData()
      });

      // 获取详情数据
      var datTime, turnTime, iccid; //数据上传，卷粘虫板
      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 + ')');
            datTime = sex_trap.dat_f;
            turnTime = sex_trap.turn_t;
            iccid = sex_trap.iccid;
          },
          error: function (type) {
            console.log(type);
          }
        })
      }
      // 获取位置
      var geoc = new BMap.Geocoder();
      // 渲染界面
      function renderHtml(data) {
        $('#equip_id').html(id);
        $('#equip_name').html(data.equip_name || '--');
        $('#upl_time').html(data.upl_time);
        $('#curr_area').html(id);
        var sex_trap = eval('(' + data.sex_trap + ')');
        $('#devNum').html(sex_trap.dev_num || '--');
        $('#csq').html(sex_trap.csq);
        $('#equip_ds').html(sex_trap.ds ? '开启' : '关闭');
        $('#equip_ws').html(sex_trap.ws ? '工作' : '待机');
        // $('#equip_cs').html(sex_trap.cs?'未充电':'充电中');
        if (sex_trap.cs == 0) {
          $('#equip_cs').html('正常');
        } else if (sex_trap.cs == 1) {
          $('#equip_cs').html('光控');
        } else if (sex_trap.cs == 2) {
          $('#equip_cs').html('充电');
        }
        // $('#equip_cs').html(sex_trap.cs?'未充电':'充电中');
        if (sex_trap.bs != '') {
          if (sex_trap.bs == 0) {
            $('#equip_bs').html('正常');
          } else if (sex_trap.bs == 1) {
            $('#equip_bs').html('欠压');
          } else if (sex_trap.bs == 2) {
            $('#equip_bs').html('过压');
          }
        } else {
          $('#equip_bs').html('--');
        }
        $('#equip_cpuTmp').html((parseInt(sex_trap.cpu_tmp) / 1000).toFixed(2));
        $('#equip_dver').html(sex_trap.dver);
        var cv = parseInt(sex_trap.cv / 40 * 100); //充电电压  最大值40(2/40)
        $('.chart1').data('easyPieChart').update(cv / 1000);
        $('.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.hwcnt/6534); //红外计数  最大值6534
        // $('.chart5').data('easyPieChart').update(hwcnt);
        // $('.chart5').find('.percent').html(sex_trap.hwcnt);
        // var volcnt = parseInt(sex_trap.volcnt/6534); //高压计数  最大值20
        // $('.chart6').data('easyPieChart').update(volcnt);
        // $('.chart6').find('.percent').html(sex_trap.volcnt);
        $("#dtlDropTime-slider").slider('value', sex_trap.dat_f); //数据上传时间间隔
        $('#dtlDropTime').html(sex_trap.dat_f);

        $("#takePhotoTime-slider").slider('value', sex_trap.turn_t); //卷粘虫板时间
        $('#takePhotoTime').html(sex_trap.turn_t);

        layui.use('form', function () {
          var form = layui.form;
          //给表单赋值
          form.val("selectObj", { // form标签 lay-filter="" 对应的值
            "takePhotoTime": parseInt(sex_trap.pic_t) // "name": "value"
            , "takePhotoInterval": parseInt(sex_trap.pic_f)
          });
          pic_f = sex_trap.pic_f
          pic_t = sex_trap.pic_t
        });

        if (sex_trap.lng > 999) {
          var lng = Math.floor(sex_trap.lng / 100) + ((sex_trap.lng % 100) / 60);
          var lat = Math.floor(sex_trap.lat / 100) + ((sex_trap.lat % 100) / 60);
        } else {
          var lng = Number(sex_trap.lng);
          var lat = Number(sex_trap.lat);
        }

        var lng1 = wgs84togcj02(lng, lat);
        var lng2 = gcj02tobd09(lng1[0], lng1[1]);
        var pt = new BMap.Point(lng2[0], lng2[1]);
        geoc.getLocation(pt, function (rs) {
          var addComp = rs.addressComponents;
          // $('.area').html('位置：'+ addComp.province + ", " + addComp.city + ", " + addComp.district)
          $('#curr_area').html(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
        });
      }

      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 + '&etype=SEX_TRAP_2' + '&etypeA=' + type + '&onoffSelect=' + onoffSelect;
        location.href = url;
      }


      // 数据上传时间间隔
      $("#dtlDropTime-slider").css('width', '85%').slider({
        value: 10,
        range: "min",
        min: 10,
        max: 120,
        step: 10,
        slide: function (event, ui) {
          var val = parseInt(ui.value);
          $('#dtlDropTime').html(val);
        },
        stop: function (event, ui) {
          console.log(datTime)
          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) {
              $("#dtlDropTime-slider").slider('value', datTime); //数据上传时间间隔
              $('#dtlDropTime').html(datTime);
            });
          });
        }
      });
      // $( "#dtlDropTime-slider" ).slider( "disable" );
      // 卷粘虫板时间
      $("#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) {
          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);
            });
          });
        }
      });

      layui.use('form', function () {
        var form = layui.form;
        form.on('select', function (data) {
          console.log($(data.elem.form).find('select')); //得到select原始DOM对象
          var select1 = $(data.elem.form).find('select')[0];
          var select2 = $(data.elem.form).find('select')[1];
          // console.log($(select1).val()); //得到被选中的值
          // console.log($(select2).val()); //得到美化后的DOM对象
          var data = {
            ext: 'photoset',
            pic_t: $(select1).val(),
            pic_f: $(select2).val(),
          }
          sendCtrlFun(data, function () { })
        });
      });

      function popupFrame(txt, flag) {
        layui.use('layer', function () {
          var layer = layui.layer;
          layer.confirm('是否' + txt + '?', { icon: 3, offset: '100px', title: '提示' }, function (index) {
            if (flag == 1) {
              var data = {
                ext: 'reboot',
              }
              var fun = function () { };
            } else if (flag == 2) {
              var data = {
                ext: 'update',
              }
              var fun = function () { };
            } else if (flag == 3) {
              var data = {
                ext: 'mqttconf',
              }
              var fun = function () {
                var index = layer.load(2, { time: 3 * 1000 });
                setTimeout(function () {
                  $.ajax({
                    url: 'sex_mqtt_detail',
                    type: 'post',
                    data: {
                      e_id: id
                    },
                    dataType: 'json',
                    success: function (data) {
                      layer.open({
                        type: 1
                        , title: false //不显示标题栏
                        , closeBtn: false
                        , area: '400px;'
                        , shade: 0.8
                        , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                        , btn: ['确定']
                        , btnAlign: 'c'
                        , moveType: 1 //拖拽模式，0或者1
                        , content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">ip：' + data.ip + '<br />port：' + data.port + '<br />sub：' + data.sub + '<br />pub：' + data.pub + '<br />lastwill：' + data.lastwill + '<br />keepalive：' + data.keepalive + '<br />username：' + data.username + '<br />stamp：' + data.stamp + '</div>'

                      });
                    },
                    error: function (type) {
                      console.log(type)
                    }
                  })
                }, 3000)
              };
            } else if (flag == 4) {
              var data = {
                ext: 'takephoto',
              }
              var fun = function () { };
            } else if (flag == 5) {
              var data = {
                ext: 'turn',
              }
              var fun = function () { };
            } else if (flag == 6) {
              var data = {
                ext: 'repower',
              }
              var fun = function () { };
            } else if (flag == 7) {
              var data = {
                ext: 'ds1',
              }
              var fun = function () { };
            } else if (flag == 8) {
              var data = {
                ext: 'ds0',
              }
              var fun = function () { };
            }

            sendCtrlFun(data, fun)
            layer.close(index);
          });
        })
      }


      function sendCtrlFun(data, callback) {
        data.e_id = id;
        layui.use('layer', function () {
          var pic_fA = data.pic_f
          var pic_tA = data.pic_t
          var layer = layui.layer;
          layer.confirm('是否修改定时拍照循环工作时间?', { icon: 3, title: '提示' }, function (index) {
            layer.close(index);
            $.ajax({
              url: 'sex_mqtt',
              type: 'post',
              data: data,
              success: function (data) {
                if (data == 0) {
                  pic_f = pic_fA
                  pic_t = pic_tA
                  callback();
                }
              },
              error: function (type) {
                console.log(type)
              }
            })
          }, function (index, layero) {
            layui.use('form', function () {
              var form = layui.form;
              //给表单赋值
              form.val("selectObj", { // form标签 lay-filter="" 对应的值
                "takePhotoTime": parseInt(pic_t) // "name": "value"
                , "takePhotoInterval": parseInt(pic_f)
              });
            });
          });
        });

      }

      function reloadPage() {
        var data = {
          ext: 'data',
        }
        var fun = function () {
          var index = layer.load(2, { time: 3 * 1000 });
          setTimeout(function () {
            getData()
          }, 3000)
        };
        sendCtrlFun(data, fun)
      }

      // sim卡查询
      function sendexamineSIM() {
        examineSIM(iccid)
      }
      function examineSIM(iccid) {
        $.ajax({
          url: 'siminfo',
          type: 'post',
          dataType: 'json',
          data: {
            simid: iccid,
          },
          beforeSend: function (XMLHttpRequest) {
            //注意，layer.msg默认3秒自动关闭，如果数据加载耗时比较长，需要设置time
            loadingFlag = layer.msg('请求中，请稍候……', { icon: 16, shade: 0.01, shadeClose: false, time: 60000 });
          },
          success: function (data) {
            var dat = data.data;
            if (data.code == 0) {
              var status;
              if (dat.account_status == "0") {
                status = "未知";
              } else if (dat.account_status == "1") {
                status = "测试期";
              } else if (dat.account_status == "2") {
                status = "沉默期";
              } else if (dat.account_status == "3") {
                status = "使用中";
              } else if (dat.account_status == "4") {
                status = "停机";
              } else if (dat.account_status == "5") {
                status = "停机保号";
              } else if (dat.account_status == "6") {
                status = "预销号";
              } else if (dat.account_status == "7") {
                status = "销号";
              }
              var usage;
              if (dat.iccid) {
                usage = dat.data_usage;
              } else {
                usage.innerHTML = '--';
              }
              var balance;
              if (dat.iccid) {
                balance = dat.data_balance;
              } else {
                balance = '--';
              }
              var time;
              if (dat.iccid) {
                var timestamp4 = new Date(dat.expiry_date * 1000);//直接用 new Date(时间戳) 格式转化获得当前时间
                time = timestamp4.toLocaleDateString().replace(/\//g, "-") + " " + timestamp4.toTimeString().substr(0, 8);
              } else {
                time = '--';
              }
              layer.close(loadingFlag);
              layer.open({
                type: 1
                , title: false //不显示标题栏
                , closeBtn: false
                , area: '300px;'
                , shade: 0.8
                , offset: '100px'
                , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                , btn: ['我知道了']
                , btnAlign: 'c'
                , moveType: 1 //拖拽模式，0或者1
                , content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">SIM卡查询结果<br>ICCID:' + iccid + '<br><br>状态：' + status + '<br>套餐：' + dat.data_plan + 'Mb<br>已用流量:' + usage + 'Mb<br>剩余流量：' + balance + 'Mb<br>到期时间：' + time + '</div>'
                , success: function (layero) {
                }
              });
            } else {
              layer.msg('查询失败！');
            }
          }
        })
      }
      function openNewPage(falg) {
        if (falg == 1) {
          window.location.href = 'sex_trap_photo?id=' + id + '&currpage=' + currpage + '&equipName=' + equipName + '&equipId=' + equipId + '&etype=SEX_TRAP_2' + '&etypeA=' + type + '&onoffSelect=' + onoffSelect
        }
        if (falg == 2) {
          window.location.href = 'sex_trap_data?id=' + id + '&currpage=' + currpage + '&equipName=' + equipName + '&equipId=' + equipId + '&etype=SEX_TRAP_2' + '&etypeA=' + type + '&onoffSelect=' + onoffSelect
        }
      }

      //设置诱芯
      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>