equipmanage_jk.html 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884
  1. {% load staticfiles %}
  2. <!DOCTYPE html>
  3. <html lang="zh-CN">
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  7. <link href="{% static '/lib/bootstrap-3.3.7/css/bootstrap.css' %}" rel="stylesheet">
  8. <link rel="stylesheet" href="{% static '/lib/font-awesome/4.5.0/css/font-awesome.css' %}">
  9. <link rel="stylesheet" href="{% static '/lib/css/ace.min.css' %}" />
  10. <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
  11. <meta name="renderer" content="webkit">
  12. <title>测试页面</title>
  13. <style>
  14. body {
  15. background: #fff;
  16. }
  17. .flashDownDiv,
  18. .nullData {
  19. text-align: center;
  20. font-size: 14px;
  21. height: 630px;
  22. }
  23. .flashDownDiv p:first-child,
  24. .nullData p:first-child {
  25. padding-top: 10%;
  26. }
  27. .flashShowDiv,
  28. .flashDownDiv,
  29. .nullData {
  30. display: none;
  31. }
  32. /* 视频框 */
  33. .equipname {
  34. position: absolute;
  35. display: none;
  36. }
  37. #divMain{
  38. width: 100%;
  39. background: rgb(49, 58, 71);
  40. box-sizing: border-box;
  41. margin: auto;
  42. padding: 15px;
  43. position: relative;
  44. z-index: 9999;
  45. }
  46. #divMain .a2 {
  47. width: 50%;
  48. height: 100%;
  49. }
  50. #divMain .a4 {
  51. width: 50%;
  52. height: 50%;
  53. }
  54. #divMain .a9 {
  55. width: 33.33333%;
  56. height: 33.33333%;
  57. }
  58. #divMain .a12 {
  59. width: 25%;
  60. height: 33.33333%;
  61. }
  62. #divMain .a16 {
  63. width: 25%;
  64. height: 25%;
  65. }
  66. #divMain a,
  67. a:visited {
  68. float: left;
  69. border: 1px solid #000;
  70. margin: 0 -1px -1px 0;
  71. position: relative;
  72. text-decoration: none;
  73. }
  74. #divMain .aSelected {
  75. z-index: 9;
  76. border: 1px solid #dbffc9;
  77. }
  78. /* 多屏选择 */
  79. .v2,
  80. .v4,
  81. .v9,
  82. .v12,
  83. .v16 {
  84. color: #fff;
  85. font-size: 24px;
  86. }
  87. .v2 {
  88. cursor: pointer;
  89. width: 23px;
  90. height: 23px;
  91. display: inline-table;
  92. }
  93. .v2{
  94. background: url(../static/img/jkbtn/1.png) no-repeat center;
  95. }
  96. .v2:hover,.v2.active{
  97. background: url(../static/img/jkbtn/11.png) no-repeat center;
  98. }
  99. .v2.active,
  100. .v2:hover {
  101. color: #37CAB9;
  102. }
  103. .v4 {
  104. cursor: pointer;
  105. width: 23px;
  106. height: 23px;
  107. display: inline-table;
  108. }
  109. .v4{
  110. background: url(../static/img/jkbtn/2.png) no-repeat center;
  111. }
  112. .v4:hover,.v4.active{
  113. background: url(../static/img/jkbtn/22.png) no-repeat center;
  114. }
  115. .v4.active,
  116. .v4:hover {
  117. color: #37CAB9;
  118. }
  119. .v9 {
  120. cursor: pointer;
  121. width: 23px;
  122. height: 23px;
  123. display: inline-table;
  124. }
  125. .v9{
  126. background: url(../static/img/jkbtn/3.png) no-repeat center;
  127. }
  128. .v9:hover,.v9.active{
  129. background: url(../static/img/jkbtn/33.png) no-repeat center;
  130. }
  131. .v9.active,
  132. .v9:hover {
  133. color: #37CAB9;
  134. }
  135. .v12 {
  136. cursor: pointer;
  137. width: 23px;
  138. height: 23px;
  139. display: inline-table;
  140. }
  141. .v12{
  142. background: url(../static/img/jkbtn/2.png) no-repeat center;
  143. }
  144. .v12:hover,.v12.active{
  145. background: url(../static/img/jkbtn/22.png) no-repeat center;
  146. }
  147. .v12.active,
  148. .v12:hover {
  149. color: #37CAB9;
  150. }
  151. .v16{
  152. background: url(../static/img/jkbtn/4.png) no-repeat center;
  153. }
  154. .v16:hover,.v16.active{
  155. background: url(../static/img/jkbtn/44.png) no-repeat center;
  156. }
  157. .v16,
  158. .v16:hover {
  159. cursor: pointer;
  160. width: 23px;
  161. height: 23px;
  162. display: inline-table;
  163. }
  164. /* 列表 */
  165. .scrollDiv {
  166. overflow-x: hidden;
  167. line-height: 40px;
  168. height: 100%;
  169. width: 220px;
  170. }
  171. #jkList {
  172. width: 220px;
  173. }
  174. #jkList>div {
  175. color: #fff;
  176. vertical-align: middle;
  177. line-height: 40px;
  178. padding: 0px 15px;
  179. white-space: nowrap;
  180. width: 220px;
  181. /* text-overflow: ellipsis;
  182. overflow: hidden;
  183. cursor: pointer; */
  184. }
  185. #jkList>div.active,
  186. #jkList>div:hover {
  187. color: rgb(255, 255, 0);
  188. background-color: #36404D;
  189. }
  190. /* 控制 */
  191. .ctrlBox {
  192. /* display: none; */
  193. position: absolute;
  194. /* background: #685f5f; */
  195. z-index: 99999;
  196. padding: 0 20px;
  197. width: 220px;
  198. height: 275px;
  199. left: 0;
  200. bottom: 20px;
  201. /* border: 1px solid #000; */
  202. border-radius: 30px 30px 50px 50px;
  203. }
  204. .addCtrl,
  205. .cutCtrl,
  206. .minusCtrl,
  207. .directionCtrl>div {
  208. position: absolute;
  209. width: 50px;
  210. height: 50px;
  211. cursor: pointer;
  212. }
  213. .addCtrl {
  214. top: 50px;
  215. background: url(../static/img/jkbtn/jkadd.png) no-repeat center;
  216. background-size: 100% 100%;
  217. }
  218. .cutCtrl {
  219. top: 50px;
  220. left: 50%;
  221. margin-left: -18px;
  222. background: url(../static/img/jkbtn/cut.png) no-repeat center;
  223. background-size: 100% 100%;
  224. }
  225. .minusCtrl {
  226. top: 50px;
  227. right: 11px;
  228. background: url(../static/img/jkbtn/jkminus.png) no-repeat center;
  229. background-size: 100% 100%;
  230. }
  231. .directionCtrl {
  232. position: absolute;
  233. width: 200px;
  234. height: 200px;
  235. bottom: -20px;
  236. background: url(../static/img/jkbtn/jkctrl.png) no-repeat center;
  237. background-size: 90% 90%;
  238. }
  239. .upCtrl {
  240. top: 20px;
  241. left: 50%;
  242. margin-left: -25px;
  243. }
  244. .leftCtrl {
  245. left: 20px;
  246. top: 50%;
  247. margin-top: -25px;
  248. }
  249. .bottomCtrl {
  250. bottom: 20px;
  251. left: 50%;
  252. margin-left: -25px;
  253. }
  254. .rightCtrl {
  255. right: 20px;
  256. top: 50%;
  257. margin-top: -25px;
  258. }
  259. /* fenpei */
  260. .fenpei {
  261. color: #fff;
  262. text-align: center;
  263. }
  264. .fenpei span {
  265. padding: 3px 5px;
  266. }
  267. .fenpei .jianbtn,
  268. .fenpei .jiabtn {
  269. cursor: pointer;
  270. }
  271. #downpath {
  272. width: 100%;
  273. height: 80px;
  274. resize: none;
  275. margin-top: 10px;
  276. }
  277. .page-header {
  278. margin: 0 0 12px;
  279. border-bottom: 1px dotted #E2E2E2;
  280. padding-right: 35px;
  281. padding-top: 7px;
  282. text-align: right;
  283. }
  284. .page-header a {
  285. color: #31b4ff;
  286. font-size: 16px;
  287. }
  288. .page-header a:hover{
  289. color: #0074b6;
  290. }
  291. /* 查看图片按钮 */
  292. .lookjkPhoto{
  293. color: #cfa301;
  294. margin: 0 5px;
  295. line-height: 25px;
  296. }
  297. .lookjkPhoto:hover{
  298. color: rgb(255, 255, 0);
  299. }
  300. .lookjkPhoto:active,.lookjkPhoto:focus{
  301. color: #cfa301;
  302. }
  303. .jkNameSpan{
  304. vertical-align: middle;
  305. display: inline-block;
  306. width: 51%;
  307. text-overflow: ellipsis;
  308. overflow: hidden;
  309. cursor: pointer;
  310. }
  311. table{
  312. border: none;
  313. }
  314. #windowCtrl{
  315. text-align: center;
  316. }
  317. #playback{
  318. background: url(../static/img/playBackBj.png) no-repeat;
  319. width: 80px;
  320. height: 30px;
  321. background-size: 100% 100%;
  322. border: none;
  323. color: #868686;
  324. }
  325. /* 监控在线图标 */
  326. .onLine{
  327. display: inline-block;
  328. width: 10px;
  329. height: 10px;
  330. border-radius: 50%;
  331. background: #2ff235;
  332. vertical-align: middle;
  333. margin-right: 10px;
  334. }
  335. .offLine{
  336. display: inline-block;
  337. width: 10px;
  338. height: 10px;
  339. border-radius: 50%;
  340. background: #8b8a8a;
  341. vertical-align: middle;
  342. margin-right: 10px;
  343. }
  344. </style>
  345. </head>
  346. <script>
  347. </script>
  348. <body>
  349. <script src="{% static '/lib/js/ezuikit.js' %}"></script>
  350. <div class="content">
  351. <div class="searchCover page-header">
  352. <a href="equipmanage_jk1" target="BoardRight">
  353. 切换成插件播放
  354. <i class="fa fa-share" aria-hidden="true"></i>
  355. </a>
  356. </div>
  357. <div class="innerTable">
  358. <div class="nullData">
  359. <p>暂无设备</p>
  360. <p>请先添加设备</p>
  361. </div>
  362. <div class="flashDownDiv">
  363. <p>您没有安装flash插件,无法播放视频</p>
  364. <p>请先下载安装最新的flash插件</p>
  365. <a href="https://get.adobe.com/cn/flashplayer/" class="btn btn-primary">
  366. <i class="fa fa-download" aria-hidden="true"></i>
  367. 下载视频控件
  368. </a>
  369. </div>
  370. <div class="flashShowDiv">
  371. <div style="display: table; width: 100%;" id="jk_main">
  372. <!-- 视频框 -->
  373. <div style="display: table-cell;">
  374. <div id="divMain">
  375. </div>
  376. <div style="clear: both; width: 100%; height: 45px; line-height: 45px; background: rgb(49, 58, 71); padding-left: 13px;">
  377. <span class="v2" id="span_V2" onclick="CreateVidewDiv(2);">
  378. </span>
  379. <span class="v4" id="span_V4" onclick="CreateVidewDiv(4);">
  380. </span>
  381. <span class="v9" id="span_V9" onclick="CreateVidewDiv(9);">
  382. </span>
  383. <span class="v12" id="span_V12" onclick="CreateVidewDiv(12);">
  384. </span>
  385. <span class="v16" id="span_V16" onclick="CreateVidewDiv(16);">
  386. </span>
  387. <!-- <span class="v4" id="span_V4" onclick="CreateVidewDiv(9);"></span> -->
  388. <!-- <span class="v4" id="span_V4" onclick="CreateVidewDiv(9);">qqq</span> -->
  389. <!-- <button id="playback">查看回放</button> -->
  390. </div>
  391. </div>
  392. </div>
  393. </div>
  394. </div>
  395. </div>
  396. <script src="{% static '/lib/js/jquery-2.1.4.min.js' %}"></script>
  397. <script src="{% static '/lib/bootstrap-3.3.7/js/bootstrap.js' %}"></script>
  398. <script src="{% static '/lib/layui/layui.all.js' %}"></script>
  399. <script src="{% static '/js/common.js' %}?versions=0.5.4"></script>
  400. <script>
  401. $.ajaxSetup({
  402. data: { csrfmiddlewaretoken: '{{ csrf_token }}' },
  403. });
  404. function CreateVidewDiv(n) {
  405. if($('#playback')){
  406. $('#playback').remove();
  407. }
  408. divNum = n;
  409. AutoNext = true;
  410. var width = "100%";
  411. var height = "100%";
  412. var html = "";
  413. for (var i = 1; i <= n; i++) {
  414. if (i == 1)
  415. html += "<a id=\"a_" + i + "\" class=\"a" + n + " aSelected\">";
  416. else
  417. html += "<a id=\"a_" + i + "\" class=\"a" + n + "\">";
  418. html += "<span id='span_deviceSerial_" + i + "' class='equipname' style=''></span>";
  419. html += "<span id='span_jktype_" + i + "' style='display:none'></span>";
  420. html += "<span id='span_cameraNo_" + i + "' style='display:none'></span>";
  421. html += "<table id=\"table_" + i + "\" style=\"width: " + width + "; height: " + height + "; margin:0 auto\">";
  422. html += "<tr style='display:none;'>";
  423. html += "<td id=\"title_" + i + "\" class=\"Video_Title\" onclick=\"setCurIndex(" + i + ")\" onmouseover=\"setMouseOver(" + i + ")\" onmouseout=\"setMouseOut(" + i + ")\"><span style='color:#999'>点此选择</span></td>";
  424. html += "</tr>";
  425. html += "<tr><td id='video_" + i + "' onclick=\"setCurIndex(" + i + ");\" onmouseover=\"setMouseOver(" + i + ")\" onmouseout=\"setMouseOut(" + i + ")\">";
  426. html += "</td></tr>";
  427. html += "</table> ";
  428. html += "</a> ";
  429. }
  430. curIndex = 1;
  431. $("#divMain").html(html);
  432. $("#span_V1").removeClass("active");
  433. $("#span_V4").removeClass("active");
  434. $("#span_V9").removeClass("active");
  435. $("#span_V16").removeClass("active");
  436. $("#span_V" + n).addClass("active");
  437. // var divMainWidth = $('#divMain').css('width').replace("px", "")-30;
  438. var divMainWidth = document.getElementById("divMain").clientWidth;
  439. if(divNum == 2){
  440. var divMainHeight = divMainWidth / 2 * 9 / 16+30;
  441. }else if(divNum == 4 || divNum == 9){
  442. var divMainHeight = divMainWidth * 9 / 16+30;
  443. }else if(divNum == 12){
  444. var divMainHeight = divMainWidth/4*9/16*3+30;
  445. }
  446. $('#divMain').css('height', divMainHeight + "px");
  447. scrollBar();
  448. console.log($('#divMain').css('height').replace("px", ""))
  449. }
  450. function setMouseOut(idx) {
  451. if (curIndex != idx && $("#a_" + idx).length > 0)
  452. $("#a_" + idx).removeClass("aSelected");
  453. }
  454. function setMouseOver(idx) {
  455. if ($("#a_" + idx).length > 0)
  456. $("#a_" + idx).addClass("aSelected");
  457. }
  458. // 点击获取当前监控
  459. function setCurIndex(idx) {
  460. AutoNext = false;
  461. if (curIndex > 0 && $("#a_" + curIndex).length > 0)
  462. $("#a_" + curIndex).removeClass("aSelected");
  463. curIndex = idx;
  464. if ($("#a_" + idx).length > 0)
  465. $("#a_" + idx).addClass("aSelected");
  466. // 多屏点击
  467. if(divNum>1){
  468. var imei = $("#a_" + idx).find('#span_deviceSerial_'+idx).html();
  469. var currjkType = parseInt($("#a_" + idx).find('#span_jktype_'+idx).html());
  470. if(currjkType && $('#playback').length==0){
  471. $('#windowCtrl').append('<button id="playback" imei="'+imei+'">查看回放</button>');
  472. }else if(!currjkType){
  473. $('#playback').remove();
  474. }else{
  475. $('#playback').attr('imei',imei);
  476. }
  477. }
  478. }
  479. var winHeight = 0;
  480. function windowResize() { //函数:获取尺寸
  481. var divMainWidth = $('#divMain').css('width').replace("px", "")-30;
  482. if(divNum == 2){
  483. var divMainHeight = divMainWidth / 2 * 9 / 16+30;
  484. }else if(divNum == 4 || divNum == 9){
  485. var divMainHeight = divMainWidth * 9 / 16+30;
  486. }else if(divNum == 12){
  487. var divMainHeight = divMainWidth/4*9/16*3+30;
  488. }
  489. $('#divMain').css('height', divMainHeight + "px");
  490. scrollBar();
  491. }
  492. window.onresize = function () {
  493. windowResize();
  494. }
  495. var spanIdx = "";
  496. </script>
  497. <script>
  498. // 判断是否启用flash
  499. function flashChecker() {
  500. var hasFlash = 0;     //是否安装了flash
  501. var flashVersion = 0;   //flash版本
  502. if (document.all) {
  503. var swf = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
  504. if (swf) {
  505. hasFlash = 1;
  506. VSwf = swf.GetVariable("$version");
  507. flashVersion = parseInt(VSwf.split(" ")[1].split(",")[0]);
  508. }
  509. } else {
  510. if (navigator.plugins && navigator.plugins.length > 0) {
  511. var swf = navigator.plugins["Shockwave Flash"];
  512. if (swf) {
  513. hasFlash = 1;
  514. var words = swf.description.split(" ");
  515. for (var i = 0; i < words.length; ++i) {
  516. if (isNaN(parseInt(words[i]))) {
  517. continue;
  518. }
  519. flashVersion = parseInt(words[i]);
  520. }
  521. }
  522. }
  523. }
  524. return {
  525. f: hasFlash,
  526. v: flashVersion
  527. };
  528. }
  529. var fls = flashChecker();
  530. // 控制
  531. function configCamera(deviceSerial, ctrl, movenum) {
  532. var id = $("#a_" + curIndex).find('.equipname').html();
  533. if (!id) {
  534. layer.msg('暂无设备!')
  535. return;
  536. }
  537. $.ajax({
  538. url: 'jk_view',
  539. type: 'post',
  540. dataType: 'json',
  541. data: {
  542. id: id,
  543. ctrl: ctrl,
  544. movenum: movenum
  545. },
  546. beforeSend: function () {
  547. if (ctrl == 'takephoto') {
  548. loadFlage = layer.load();
  549. }
  550. },
  551. complete: function () {
  552. layer.close(loadFlage);
  553. },
  554. success: function (data) {
  555. if (ctrl == 'takephoto') {
  556. layui.use('layer', function () {
  557. var layer = layui.layer;
  558. layer.open({
  559. title: '手动下载'
  560. , content: '<textarea readonly id="downpath">' + data.data.picUrl + '</textarea>'
  561. , btn: ['复制', '取消']
  562. , area: ['400px', '230px']
  563. , yes: function (index, layero) {
  564. //按钮【按钮一】的回调
  565. document.getElementById('downpath').select();
  566. layer.tips('手动复制,在浏览器打开,另存为', '#downpath', {
  567. tips: 2
  568. });
  569. return false;
  570. }
  571. , btn2: function (index, layero) {
  572. //按钮【按钮二】的回调
  573. //return false 开启该代码可禁止点击该按钮关闭
  574. }
  575. , btn3: function (index, layero) {
  576. }
  577. , cancel: function () {
  578. //右上角关闭回调
  579. //return false 开启该代码可禁止点击该按钮关闭
  580. }
  581. });
  582. });
  583. // window.open(data.data.picUrl)
  584. }
  585. }
  586. })
  587. }
  588. (function(){
  589. if (fls.f) { //安装了flash
  590. CreateVidewDiv(2)
  591. $('.flashShowDiv').show();
  592. $('.flashDownDiv').hide();
  593. // getJkList(1, '')
  594. } else {
  595. $('.flashShowDiv').hide();
  596. $('.flashDownDiv').show();
  597. }
  598. })()
  599. // 获取视频列表
  600. function getJkList(page, searchId) {
  601. $.ajax({
  602. url: 'jk_page',
  603. type: 'get',
  604. data: {
  605. page: page,
  606. f_id: searchId
  607. },
  608. dataType: 'json',
  609. beforeSend: function () {
  610. loadFlage = layer.load();
  611. },
  612. success: function (data) {
  613. fillmenu(data)
  614. $('#currPageNum').html(currPage);
  615. totalPageNum = Math.ceil(data.nums / 10);
  616. $('#totalPageNum').html(totalPageNum);
  617. layer.close(loadFlage);
  618. }
  619. })
  620. }
  621. function fillmenu(data) {
  622. var dat = data.ids;
  623. var html = '';
  624. for (i = 0; i < dat.length; i++) {
  625. var name = dat[i].equip_name ? dat[i].equip_name : dat[i].equip_id;
  626. if(dat[i].status == 1){
  627. var icon = '<span class="onLine"></span>'
  628. }else{
  629. var icon = '<span class="offLine"></span>'
  630. }
  631. if (i == 0) {
  632. html += '<div class="active jkItem" data-jktype="' + dat[i].jktype +'" data-id=' + dat[i].equip_id + '>'+icon+'<span title="'+name+'" class="jkNameSpan">' + name + '</span>';
  633. if(dat[i].photo_num >0){
  634. html += '<a href="javascript:;" class="lookjkPhoto">查看图片</a></div>';
  635. }else{
  636. html += '</div>';
  637. }
  638. } else {
  639. html += '<div class="jkItem" data-jktype="' + dat[i].jktype +'" data-id=' + dat[i].equip_id + '>'+icon+'<span title="'+name+'" class="jkNameSpan">' + name + '</span>';
  640. if(dat[i].photo_num >0){
  641. html += '<a href="javascript:;" class="lookjkPhoto">查看图片</a></div>';
  642. }else{
  643. html += '</div>';
  644. }
  645. }
  646. if (i == dat.length - 1) {
  647. $('#jkList').html(html);
  648. getPath(dat[0].equip_id,dat[0].jktype)
  649. }
  650. }
  651. }
  652. // 菜单点击事件
  653. $('#jkList').on('click', '.jkItem', function () {
  654. var jktype = $(this).data('jktype');
  655. getPath($(this).data('id'),jktype);
  656. $('#jkList .jkItem').removeClass('active');
  657. $(this).addClass('active');
  658. })
  659. $('#jkList').on('click', '.lookjkPhoto', function (event) {
  660. // alert($(this).parent().data('id'));
  661. var imei = $(this).parent().data('id');
  662. // document.getElementById("iframe-main").src="home_map.html";
  663. $("body", parent.document).find('iframe').attr('src','jk_image?imei='+imei);
  664. event.stopPropagation();//阻止事件冒泡即可
  665. })
  666. //预览函数
  667. function StartPlay(id, connectionType, liveStatus, rtmp, hls, deviceSerial, cameraNo, title, obj,jktype) {
  668. if (obj == null) {
  669. $("#div_CamerList>div").eq(0).addClass("select-c");
  670. }
  671. else {
  672. $("#div_CamerList").children("div").removeClass("select-c");
  673. $(obj).addClass("select-c");
  674. }
  675. $("#span_ConnectionType_" + curIndex).html(connectionType);
  676. $("#span_deviceSerial_" + curIndex).html(deviceSerial);
  677. $("#span_jktype_" + curIndex).html(jktype);
  678. $("#span_cameraNo_" + curIndex).html(cameraNo);
  679. $("#span_playTime_" + curIndex).html(new Date().getTime()); //开始播放,时间为0
  680. if (spanIdx != "")
  681. $("#Span_" + spanIdx).css("color", "white");
  682. spanIdx = id;
  683. $("#Span_" + id).css("color", "#FFFF00");
  684. $("#a_" + curIndex).addClass("noborder");
  685. if (curIndex == 0 || $("#a_" + curIndex).length == 0)
  686. return;
  687. $("#title_" + curIndex).html(title);
  688. var playHtml = "<video id='myPlayer" + curIndex + "' style='width: 100%; height: 100%' class='videoNum" + divNum + "' poster='' controls playsinline webkit-playsinline autoplay>";
  689. playHtml += "<source src='" + hls + "' type='' />";
  690. playHtml += "</video>";
  691. var script = document.createElement("script");
  692. script.type = "text/javascript";
  693. script.appendChild(document.createTextNode(" new EZUIPlayer('myPlayer" + curIndex + "');"));
  694. $("#video_" + curIndex).html(playHtml);
  695. $("#video_" + curIndex).append(script);
  696. if ($("#a_" + (curIndex + 1)).length > 0)
  697. SetAutoNext(curIndex + 1);
  698. //SetPtzControl();
  699. windowResize();
  700. }
  701. function getPath(imei,jktype) {
  702. if(jktype && $('#playback').length==0){
  703. $('#windowCtrl').append('<button id="playback" imei="'+imei+'">查看回放</button>');
  704. }else if(!jktype){
  705. $('#playback').remove();
  706. }else{
  707. $('#playback').attr('imei',imei);
  708. }
  709. $.ajax({
  710. url: 'jk_view',
  711. type: 'get',
  712. data: {
  713. imei: imei
  714. },
  715. dataType: 'json',
  716. beforeSend: function () {
  717. loadFlage = layer.load();
  718. },
  719. success: function (data) {
  720. var dat = data[0].data[0];
  721. if (data[0].code == 200) {
  722. StartPlay(dat.deviceSerial, '', '', dat.rtmpHd, dat.hlsHd, dat.deviceSerial, '', '', null,jktype)
  723. }
  724. layer.close(loadFlage);
  725. }
  726. })
  727. }
  728. function SetAutoNext(idx) {
  729. if (AutoNext) {
  730. if (curIndex > 0 && $("#a_" + curIndex).length > 0)
  731. $("#a_" + curIndex).removeClass("aSelected");
  732. curIndex = idx;
  733. if ($("#a_" + idx).length > 0)
  734. $("#a_" + idx).addClass("aSelected");
  735. }
  736. }
  737. // 分页点击
  738. var currPage = 1;
  739. var totalPageNum;
  740. function getjklistFun(str) {
  741. if (str == 'jian') {
  742. if (currPage > 1) {
  743. currPage--;
  744. }
  745. } else {
  746. if (currPage < totalPageNum) {
  747. currPage++;
  748. }
  749. }
  750. getJkList(currPage, '')
  751. }
  752. // StartPlay('363','1', '2', 'rtmp://rtmp.open.ys7.com/openlive/8702368f321341deb9fb5edb9d72faec', 'http://hls.open.ys7.com/openlive/8702368f321341deb9fb5edb9d72faec.m3u8', '719458092', '1','阳台',null);
  753. // 回放
  754. $(document).on('click','#playback',function(){
  755. var id = $(this).attr('imei');
  756. layer.open({
  757. title:'查看回放',
  758. type: 2,
  759. area: ['80%', '80%'],
  760. fixed: false, //不固定
  761. maxmin: true,
  762. content: 'nvr_view',
  763. success: function(layero, index){
  764. var iframe = window['layui-layer-iframe' + index];
  765. iframe.child(id) //函数
  766. }
  767. });
  768. })
  769. </script>
  770. </body>
  771. </html>