| | |
| | | <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 {
|
| | |
| | | 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">
|
| | |
| | | <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>
|
| | |
| | | </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'); // 实例化CkVideo
|
| | | var footerMenu = new FooterMenu($('#pageFooter')); // 实例化底部导航栏
|
| | | var homeInfo = parent.$('#homeInfoIframe').data('homeInfo'); // 机房信息
|
| | | var homeInfoTpl = $('#homeTab').html(); // 机房信息模板
|
| | |
| | | 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');
|
| | |
| | | // 返回结果集
|
| | | 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>
|