From 2e9957c187b7735453fe8225bd095e64b072334e Mon Sep 17 00:00:00 2001 From: hdw <hdw@192.168.31.211> Date: 星期一, 17 十二月 2018 19:19:56 +0800 Subject: [PATCH] 添加内容 --- gx_tieta/WebRoot/mobil/iframe/seenhomeinfo.html | 135 +++++++++++++++++++++++++++++++++++++++++++-- 1 files changed, 129 insertions(+), 6 deletions(-) diff --git a/gx_tieta/WebRoot/mobil/iframe/seenhomeinfo.html b/gx_tieta/WebRoot/mobil/iframe/seenhomeinfo.html index 09093a4..a17ad3c 100644 --- a/gx_tieta/WebRoot/mobil/iframe/seenhomeinfo.html +++ b/gx_tieta/WebRoot/mobil/iframe/seenhomeinfo.html @@ -9,6 +9,7 @@ <link rel="stylesheet" href="../src/css/layui.css"> <link rel="stylesheet" href="../app/css/common.css"> <link rel="stylesheet" href="../app/css/map.css"> + <link rel="stylesheet" href="../app/css/module.css"> <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css"> <style> body.homeinfo-tab .layui-tab { @@ -23,9 +24,16 @@ body.homeinfo-tab .layui-tab-content .layui-tab-item.layui-show { height: 100%; } + #imgCarousel .carousel-item div { + text-align: center; + } + #imgCarousel img { + width: 100%; + height: auto; + } </style> </head> -<body class="full-height homeinfo-tab"> +<body class="full-height homeinfo-tab" style="overflow:hidden;"> <div class="rel-full"> <div class="page-header bg-gay3"> <div class="layui-row h40"> @@ -43,14 +51,30 @@ <div class="layui-tab layui-tab-card" lay-filter="homeInfoTab" id="homeInfoTab" style="height: 100%;"></div> </div> </div> - <div class="abs" id="video"> + <div class="abs h" id="video"> <div class="rel-full"> - 瑙嗛淇℃伅 + <div class="ck-video-container h" id="ckVideo"> + <div class="ck-video" id="myVideo"></div> + <div class="ck-video-list slide-hide"> + <div class="ck-video-list-rel"> + <div class="ck-video-list-container"> + <ul> + <li><a href="javascript:;" class="active-this"><i class="fa fa-video-camera"></i><span>瑙嗛1.mp4</span></a></li> + <li><a href="javascript:;"><i class="fa fa-video-camera"></i><span>瑙嗛2.mp4</span></a></li> + </ul> + </div> + <div class="ck-video-bg"></div> + <div class="ck-video-slide"><i class="fa fa-angle-right"></i></div> + </div> + </div> + </div> </div> </div> <div class="abs" id="imgs"> <div class="rel-full"> - 鍥剧墖淇℃伅 + <div class="layui-carousel" id="imgCarousel" lay-filter="imgCarousel"> + <div carousel-item="" class="carousel-item" id="carouselItems"></div> + </div> </div> </div> </div> @@ -328,16 +352,19 @@ </script> <script src="../js/jquery-1.8.3.js"></script> <script src="../../src/layui.js"></script> + <script src="../../ckplayer/ckplayer.js"></script> <script src="../app/js/common.js"></script> <script src="../../pages/js/GPS.js"></script> <script type="text/javascript"> // layui妯″潡 - layui.use(['layer', 'laytpl', 'form', 'upload', 'element'], function() { + layui.use(['layer', 'laytpl', 'form', 'upload', 'element', 'carousel'], function() { var layer = layui.layer; // 鑾峰彇layer妯″潡 var laytpl = layui.laytpl; // 鑾峰彇laytpl妯″潡 var form = layui.form; // 鑾峰彇form妯″潡 var upload = layui.upload; // 鑾峰彇upload妯″潡 var element = layui.element; // 鑾峰彇element妯″潡 + var carousel = layui.carousel; // 鑾峰彇carousel妯″潡 + var ckVideo = new CkVideo('#ckVideo', '#myVideo'); // 瀹炰緥鍖朇kVideo var footerMenu = new FooterMenu($('#pageFooter')); // 瀹炰緥鍖栧簳閮ㄥ鑸爮 var homeInfo = parent.$('#homeInfoIframe').data('homeInfo'); // 鏈烘埧淇℃伅 var homeInfoTpl = $('#homeTab').html(); // 鏈烘埧淇℃伅妯℃澘 @@ -367,7 +394,7 @@ if(rs.code == 1) { var data = rs.data; var rsData = formatHomeInfo(data); - console.log(rsData); + // console.log(rsData); laytpl(homeInfoTpl).render(rsData, function(html) { $('#homeInfoTab').html(html); element.render('tab', 'homeInfoTab'); @@ -520,6 +547,102 @@ // 杩斿洖缁撴灉闆� return rs; } + + // 鑾峰彇瑙嗛鍒楄〃 + getVideoList(homeInfo.homeId); + function getVideoList(sid) { + var tmp = { + StationId: sid, + VideoOrImage: 'video' + }; + var videoContainer = $('#videos .video-list-content'); + // 璇锋眰瑙嗛鎾斁鍒楄〃 + $.ajax({ + type: 'post', + async: true, + url: 'MyFileAction!searchStationSource', + data: 'json='+JSON.stringify(tmp), + dataType: 'json', + success: function(result) { + var rs = JSON.parse(result.result); + //console.log(rs); + if(rs.code==1) { + var data = rs.data; + ckVideo.init(data, sid); + }else { + ckVideo.init([], sid); + } + + } + }); + } + + + // 鏈烘埧鐜鍥剧墖闆嗘ā鍧� + var imgCarouselopts = { + elem: '#imgCarousel', + arrow: 'always', + width: '100%', + height: '100%', + autoplay: false + }; + + //甯歌杞挱 + var homeEnvImgs = carousel.render(imgCarouselopts); + // 鏌ヨ杞挱鍥捐祫婧� + var imgsContainer = $('#carouselItems'); + searchCarouselImgs(homeInfo.homeId, homeEnvImgs, imgCarouselopts, imgsContainer); + function searchCarouselImgs(sid, carousel, options, imgsContainer) { + var tmp = { + StationId: sid, + VideoOrImage: 'image' + }; + // 璇锋眰瑙嗛鎾斁鍒楄〃 + $.ajax({ + type: 'post', + async: true, + url: 'MyFileAction!searchStationSource', + data: 'json='+JSON.stringify(tmp), + dataType: 'json', + success: function(result) { + var rs = JSON.parse(result.result); + //console.log(rs); + var rsList = []; + if(rs.code==1) { + var data = rs.data; + for(var i=0; i<data.length; i++) { + var _data = data[i]; + var tmp = {}; + tmp.fileName = _data.fileName; + tmp.fileUrl = '../../../stationsrc/'+sid+'/image/'+_data.fileName; + rsList.push(tmp); + } + }else { + var tmp = {}; + tmp.fileName = 'none.jpg'; + tmp.fileUrl = '../../images/none.jpg'; + rsList.push(tmp); + } + updateCarouselImgs(homeEnvImgs, imgCarouselopts, imgsContainer, rsList); + } + }); + } + + // 鏇存柊鍥剧墖杞挱鍥� + function updateCarouselImgs(carousel, options, container, imgs) { + // 娓呯┖瀹瑰櫒 + container.text(''); + // 閬嶅巻imgs + for(var i=0; i<imgs.length; i++) { + var _imgs = imgs[i]; + var item = $('<div><img src="'+_imgs.fileUrl+'"></div>'); + container.append(item); + } + + carousel.reload(options); + } + + }); </script> </body> -- Gitblit v1.9.1