jifuning
/
zhihui_kuangshan_app


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363
							<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
    />
    <meta
      name="format-detection"
      content="telephone=no,email=no,date=no,address=no"
    />
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <link rel="stylesheet" href="../../css/aui.css" />
    <link rel="stylesheet" href="../../css/projeck.css" />
    <style>
      body,
      html {
        background: #fff;
        overflow: hidden;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        position: relative;
      }
      .api_layout {
        height: 100%;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
      }
      .monitorList {
        padding: 14px;
      }
      .monitorList li {
        display: flex;
        display: -webkit-flex;
        justify-content: flex-start;
        -webkit-justify-content: flex-start;
        height: 56px;
        line-height: 56px;
        align-items: center;
        color: #5a5a5a;
        font-size: 14px;
        position: relative;
      }
      .monitorList li:after {
        content: '';
        display: table;
        position: absolute;
        width: 100%;
        height: 1px;
        background: #e8e9ea;
        bottom: 0;
        left: 0;
      }
      .monitorList li img {
        width: 42px;
        height: 42px;
        display: block;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        margin-right: 19px;
      }
      .right_side {
        position: absolute;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        transition: 0.5ms;
      }
      .list {
        position: absolute;
        top: 0;
        right: -75%;
        width: 75%;
        height: 100%;
        background: #fff;
        transition: 0.3s;
      }
      .titles {
        height: 38px;
        line-height: 38px;
        padding-left: 15px;
        font-size: 15px;
        color: #2c3e50;
        position: relative;
      }
      .titles:after {
        content: '';
        display: table;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: #009fe8;
      }
      .titles i {
        display: block;
        width: 19px;
        height: 19px;
        line-height: 19px;
        background: url('../../image/close.png') no-repeat;
        background-size: cover;
        text-align: center;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        position: absolute;
        top: 8px;
        right: 10px;
        color: #ced3d6;
        font-size: 8px;
      }
      .api_lists {
        padding: 0 14px;
        height: 100%;
        overflow-y: scroll;
        padding-bottom: 38px;
        -webkit-overflow-scrolling: touch;
      }
      .api_lists li {
        display: flex;
        display: -webkit-flex;
        justify-content: flex-start;
        -webkit-justify-content: flex-start;
        height: 90px;
        align-items: center;
        position: relative;
      }
      .info p {
        font-size: 15px;
      }
      .api_lists li:after {
        content: '';
        display: table;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: #e8e9ea;
      }
      .api_lists li p {
        color: #2c3e50;
        font-size: 13px;
      }
      .monitorImg {
        width: 75px;
        height: 56px;
        display: block;
        margin-right: 20px;
      }
      .SeeBtn {
        height: 24px;
        line-height: 24px;
        width: 71px;
        text-align: center;
        color: #fff;
        background: #009fe8;
        font-size: 10px;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
        margin-top: 15px;
      }
      .api_lists #contetnNo {
        text-align: center;
        font-size: 14px;
        color: #bdc3c7;
        height: 50px;
        margin-top: 20px;
        /*justify-content: center;
          -webkit-justify-content: center;*/
        display: none;
      }
      .api_lists #contetnNo:after {
        content: '';
        display: table;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 0;
        background: #e8e9ea;
      }
      #noJurisdiction {
        background: url('../../image/no.png') no-repeat;
        background-size: contain;
        position: absolute;
        top: -50%;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        width: 125px;
        height: 142px;
        display: none;
      }
      .ico-loading {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        width: 35px;
        height: 35px;
        background: url('../../icon/loading.gif') no-repeat;
        background-size: cover;
        background-position: center;
      }
      .loading {
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.3);
        top: 0;
        left: 0;
      }
    </style>
  </head>
  <body>
    <div class="api_layout">
      <ul class="monitorList" id="monitorList"></ul>
      <div id="noJurisdiction"></div>
    </div>
    <!--侧滑 遮罩层-->
    <div class="right_side" onclick="recoveryFun()"></div>
    <!--视频列表-->
    <div class="list">
      <p class="titles">
        <span></span>
        <i onclick="recoveryFun()"></i>
      </p>
      <ul class="api_lists" id="api_lists">
        <li id="contetnNo">-暂无内容-</li>
      </ul>
      <div class="loading">
        <i class="ico-loading"></i>
      </div>
    </div>

    <script type="text/template" id="template">
      {{~it:value}}
        {{?value.indexCode!='root000000'}}
          <li onclick="seeMonitorList('{{=value.indexCode}}','{{=value.name}}','')">
              <img src="../../icon/video.png" alt="">
              <span>{{=value.name}}</span>
          </li>
        {{?}}
      {{~}}
    </script>
    <script type="text/template" id="template01">
      {{~it:value}}
      <li>
          <img src="http://jiewei-icon.oss-cn-beijing.aliyuncs.com/default-img-150x112.png" alt="" class="monitorImg">
          <div class="info">
              <p>{{=value.cameraName}}</p>
              <button type="button" class="SeeBtn" onclick="SeeVideo('{{=value.cameraIndexCode}}','{{=value.cameraName}}','{{=value.regionIndexCode}}')">查看监控</button>
          </div>
      </li>
      {{~}}
    </script>
    <script src="../../script/api.js"></script>
    <script src="../../script/doT.min.js"></script>
    <script src="../../script/config.js"></script>
    <script>
      var toast = new auiToast(),
        headers = '';
      apiready = function () {
        var info = $api.getStorage('data'),
          token = JSON.parse(info).data.access_token;
        headers = {
          Authorization: 'Bearer ' + token,
        };
        monitorListFun(headers);
      };
      function monitorListFun(header) {
        $http.fnReuestData(
          jinfengUrlRouter.selectRootRequest,
          header,
          'get',
          '',
          function (ret, err) {
            // console.log(JSON.stringify(ret));
            // console.log(JSON.stringify(err));
            if (ret.code === '0') {
              $apis.html(monitorList, '#template', ret.data.list);
              toast.hide();
            }
          }
        );
      }
      function seeMonitorList(id, title, name) {
        $api.removeCls($api.dom('.loading'), 'hide');
        $api.html($api.dom('.titles>span'), title);
        var list = document.querySelector('.list'),
          right_side = document.querySelector('.right_side');
        list.style.right = '0';
        right_side.style.right = '0';
        var regionUuid = {
          indexCode: id,
          pageNum: 1,
          pageSize: 200,
        };
        $http.fnReuestDataNologing(
          jinfengUrlRouter.selectResourceList,
          headers,
          'get',
          regionUuid,
          function (ret, err) {
            toast.hide();
            if (ret.code === '0') {
              if (ret.data.list.length > 0) {
                $apis.html(api_lists, '#template01', ret.data.list);
                $api.addCls($api.dom('.loading'), 'hide');
              } else {
                $api.addCls($api.dom('.loading'), 'hide');
                document.getElementById('contetnNo').style.display = 'block';
              }
            }
          }
        );
      }
      function recoveryFun() {
        var list = document.querySelector('.list'),
          right_side = document.querySelector('.right_side');
        list.style.right = '-75%';
        right_side.style.right = '-100%';
      }
      // 查看视频
      function SeeVideo(id, title, regionIndexCode1) {
        $http.fnReuestDataNologing(
          jinfengUrlRouter.selectResourcePreviewURLs,
          headers,
          'get',
          {cameraIndexCode: id, regionIndexCode: regionIndexCode1},
          function (ret, err) {
            if (ret.code === '0') {
              var pageParam = {
                videoUrl: ret.data.url,
                title: title,
              };
              var video = api.require('modulehikvision');
              var param = {
                url:
                  'rtsp://120.253.61.234' +
                  ret.data.url.substring(ret.data.url.lastIndexOf(':')),
              };
              video.start2HikVisionLogin(param);
            }
          }
        );
      }
    </script>
  </body>
</html>