From b5e4362e38b7947e5163be80f5d55a9fe46ef4a0 Mon Sep 17 00:00:00 2001 From: hdw <hdw@192.168.1.9> Date: 星期五, 21 十二月 2018 09:23:31 +0800 Subject: [PATCH] 地图重新定位 --- gx_tieta/WebRoot/iframe/homeinfo.html | 423 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 418 insertions(+), 5 deletions(-) diff --git a/gx_tieta/WebRoot/iframe/homeinfo.html b/gx_tieta/WebRoot/iframe/homeinfo.html index 975c99c..4a8eeb3 100644 --- a/gx_tieta/WebRoot/iframe/homeinfo.html +++ b/gx_tieta/WebRoot/iframe/homeinfo.html @@ -9,6 +9,7 @@ <link rel="stylesheet" href="../src/css/layui.css"> <link rel="stylesheet" href="../css/common.css"> <link rel="stylesheet" href="../pages/css/mylayui.css"> + <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css"> <style> body.homeinfo-tab .layui-tab { margin: 0; @@ -19,6 +20,16 @@ body.homeinfo-tab .layui-tab-content { padding: 0; } + body.homeinfo-tab .layui-tab-content .layui-tab-item.layui-show { + height: 100%; + } + #imgCarousel .carousel-item div { + text-align: center; + } + #imgCarousel img { + width: auto; + height: 100%; + } </style> </head> <body class="homeinfo-tab"> @@ -29,6 +40,7 @@ </div> <script src="../js/jquery-1.8.3.js"></script> <script src="../src/layui.js"></script> + <script src="../ckplayer/ckplayer.js"></script> <script type="text/html" id="homeTab"> <ul class="layui-tab-title"> {{# layui.each(d.tabc, function(index, item){ }} @@ -39,7 +51,7 @@ {{# layui.each(d.tabc, function(index, item){ }} {{# if(item.type == 'group'){ }} <div class="layui-tab-item {{ item.cshow }}"> - <table class="hdw-tbl"> + <table class="hdw-tbl mrb8"> <thead> <tr> <th style="width:30%">鍙傛暟鍚嶇О</th> @@ -103,12 +115,16 @@ <td>璐熻矗浜�</td> <td>{{ item.content.person }}</td> </tr> + <tr> + <td>瀹夎浜哄憳</td> + <td>{{ item.content.install_user }}</td> + </tr> </tbody> </table> </div> - {{# }else{ }} + {{# }else if(item.type == 'home'){ }} <div class="layui-tab-item {{ item.cshow }}"> - <table class="hdw-tbl"> + <table class="hdw-tbl mrb8"> <thead> <tr> <th style="width:30%">鍙傛暟鍚嶇О</th> @@ -271,19 +287,213 @@ </tbody> </table> </div> - {{# } }} + {{# }else if(item.type == 'env'){ }} + <div class="layui-tab-item"> + <div id="video" style="width: 100%;height: 100%;"></div> + <div id="videos" class="video-list"> + <div class="video-list-container"> + <div class="video-slideToggle"><i class="fa fa-chevron-right"></i></div> + <div class="video-list-content"> + <div class="video-item video-item-active"><a href="javascript:;">瑙嗛1.mp4</a></div> + <div class="video-item"><a href="javascript:;">瑙嗛2.mp4</a></div> + <div class="video-item"><a href="javascript:;">瑙嗛3.mp4</a></div> + </div> + <div class="video-list-bg"></div> + </div> + </div> + </div> + {{# }else if(item.type == 'upload'){ }} + <div class="layui-tab-item"> + <div class="upload-form-container"> + <br> + <div class="layui-form mrl8"> + <div class="layui-form-item"> + <button type="button" class="layui-btn" id="test5"><i class="layui-icon"> </i>閫夋嫨涓婁紶瑙嗛</button> + <span style="color: #FF0000;">璇蜂笂浼犳湁鍏虫満鎴跨殑瑙嗛</span> + <div class="layui-input-inline"> + <input type="text" name="title" autocomplete="off" placeholder="璇疯緭鍏ヨ棰戝悕绉�" class="layui-input"> + </div> + </div> + </div> + <div class="layui-upload"> + <div class="layui-upload-list"> + <table class="layui-table"> + <thead> + <tr> + <th>鏂囦欢鍚�</th> + <th>澶у皬</th> + <th>鎿嶄綔</th> + </tr> + </thead> + <tbody id="videoInfoTbl"></tbody> + </table> + </div> + </div> + <div class="layui-progress layui-progress-big mrl8 mrr8" lay-showPercent="yes" lay-filter="uploadProgress"> + <div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div> + </div> + <div class="bottom-btn"> + <button type="button" class="layui-btn layui-btn-normal" id="upload">纭涓婁紶</button> + </div> + </div> + </div> + {{# }else if(item.type == 'envImg'){ }} + <div class="layui-tab-item"> + <div class="layui-carousel" id="imgCarousel" lay-filter="imgCarousel"> + <div carousel-item="" class="carousel-item" id="carouselItems"></div> + </div> + </div> + {{# }else if(item.type == 'envImgUpload'){ }} + <div class="layui-tab-item"> + <div class="upload-form-container"> + <br> + <div class="layui-form mrl8"> + <div class="layui-form-item"> + <button type="button" class="layui-btn" id="addImgs"><i class="layui-icon"> </i>閫夋嫨涓婁紶鍥剧墖</button> + <span style="color: #FF0000;">璇蜂笂浼犳湁鍏虫満鎴跨殑鍥剧墖</span> + </div> + </div> + <div class="layui-upload"> + <div class="layui-upload-list"> + <table class="layui-table"> + <thead> + <tr> + <th>鍥剧墖棰勮</th> + <th>鏂囦欢鍚�</th> + <th>澶у皬</th> + <th>鎿嶄綔</th> + </tr> + </thead> + <tbody id="imgInfoTbl"></tbody> + </table> + </div> + </div> + <div class="bottom-btn"> + <button type="button" class="layui-btn layui-btn-normal" id="uploadImgs">纭涓婁紶</button> + </div> + </div> + </div> + {{# } }} {{# }); }} </div> </script> <script> - layui.use(['element', 'laytpl'], function() { + layui.use(['element', 'laytpl', 'upload', 'carousel', 'layer'], function() { var element = layui.element; var laytpl = layui.laytpl; + var upload = layui.upload; + var carousel = layui.carousel; + var layer = layui.layer; var tabTpl = $('#homeTab').html(); var homeInfo = parent.$('#homeInfoIframeData').data('data'); //console.log(homeInfo); updatehomeInfoTab(homeInfo); + + // 閲嶆柊娓叉煋 + element.render('progress','uploadProgress'); + + // 瑙嗛娴忚妯″潡 + var videoObject = { + container: '#video', //瀹瑰櫒鐨処D鎴朿lassName + variable: 'player', //鎾斁鍑芥暟鍚嶇О + loop: false, //鎾斁缁撴潫鏄惁寰幆鎾斁 + autoplay: false,//鏄惁鑷姩鎾斁 + //poster: 'material/poster.jpg', //灏侀潰鍥剧墖 + preview: {}, + drag: 'start', //鎷栧姩鐨勫睘鎬� + video: [ + ['', 'video/mp4'] + ] + }; + + var player; + element.on('tab(homeInfoTab)', function(data){ + var playerName = '鍩虹珯鐜鐭棰�'; + var tabTxt = $(this).text(); + if(!player && tabTxt == playerName) { + player = new ckplayer(videoObject); + } + }); + + // 鐐瑰嚮鏄剧ず瑙嗛鍒楄〃 + $('#homeInfoTab').on('click', '.video-slideToggle', function() { + var videos = $(this).parent().parent(); + videos.toggleClass('video-slideHide'); + }); + + // 鏈烘埧id + var sid = homeInfo.sid; + + // 鑾峰彇瑙嗛鍒楄〃 + getVideoList(sid); + + // 鐐瑰嚮瑙嗛鍒楄〃 + var gFileName = ''; + $('#homeInfoTab').on('click', '.video-item', function(){ + var videoInfo = $(this).data('data'); + $('#homeInfoTab .video-item').removeClass('video-item-active'); + $(this).addClass('video-item-active'); + videoObject.video = [[videoInfo.fileUrl, 'video/mp4']]; + player = new ckplayer(videoObject); + }); + + + // 涓婁紶瑙嗛妯″潡 + var videoInfoTbl = $('#videoInfoTbl'); + // 娓叉煋骞跺垵濮嬪寲涓婁紶鎸夐挳 + var uploadVideo = upload.render({ + elem: '#test5' + ,url: 'MyFileAction!uploadStationFile' + ,auto: false + ,bindAction: '#upload' + ,multiple: true + ,number: 1 + ,data: { + json:JSON.stringify( { + StationId: sid, + VideoOrImage: 'video' + }) + } + ,accept: 'video' //瑙嗛 + ,choose: function(obj) { + var files = this.files = obj.pushFile(); + //console.log(files); + videoInfoTbl.text(''); + // 閬嶅巻 + Object.keys(files).forEach(function(key) { + var file = files[key]; + //console.log(file); + var tr = $(['<tr id="upload-'+ key +'">' + ,'<td>'+ file.name +'</td>' + ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>' + ,'<td>' + ,'<button class="layui-btn layui-btn-xs layui-btn-danger imgs-delete">鍒犻櫎</button>' + ,'</td>' + ,'</tr>'].join('')); + + //鍒犻櫎 + tr.find('.imgs-delete').on('click', function(){ + delete files[key]; //鍒犻櫎瀵瑰簲鐨勬枃浠� + tr.remove(); + uploadVideo.config.elem.next()[0].value = ''; //娓呯┖ input file 鍊硷紝浠ュ厤鍒犻櫎鍚庡嚭鐜板悓鍚嶆枃浠朵笉鍙�� + }); + + videoInfoTbl.append(tr); + }); + } + ,progress: function(e , percent) { + element.progress('uploadProgress',percent + '%'); + } + ,done: function(res, index, upload) { + var rs = JSON.parse(res.result); + if(rs.code == 1) { + element.progress('uploadProgress', '涓婁紶鎴愬姛锛�'); + getVideoList(sid, gFileName, true); + } + } + }); + // 鏍规嵁鎸囧畾鏍煎紡data鐨勫�兼洿鏂皌ab鐨勫唴瀹� function updatehomeInfoTab(data) { laytpl(tabTpl).render(data, function(html) { @@ -291,6 +501,209 @@ element.render('tab', 'homeInfoTab'); }); } + + + + // 鑾峰彇瑙嗛鍒楄〃 + function getVideoList(sid, fileName, update) { + 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; + var rsList = []; + for(var i=0; i<data.length; i++) { + var _data = data[i]; + var tmp = {}; + tmp.fileName = _data.fileName; + tmp.fileUrl = '../../stationsrc/'+sid+'/video/'+_data.fileName; + rsList.push(tmp); + } + + // 鏇存柊鍒楄〃骞惰幏鍙栧綋鍓嶆挱鏀剧殑瑙嗛 + var videoUrl = createVideosList(videoContainer, rsList, fileName); + // 鏄惁鏇存柊瑙嗛鍒楄〃 + if(update) { + + }else{ + videoObject.video = [[videoUrl, 'video/mp4']]; + } + }else { + createVideosList(videoContainer, [], fileName); + } + + } + }); + } + + // 鐢熸垚瑙嗛鍒楄〃 + function createVideosList(container, list, acName) { + // 娓呯┖container + container.text(""); + // 鍒ゆ柇鏄惁瀛樺湪瑙嗛鍒楄〃 + if(list.length == 0) { + return ''; + } + // 閬嶅巻list + var acIndex = 0; + for(var i=0; i<list.length; i++) { + var _list = list[i]; + var videoItem = $('<div class="video-item"><a href="javascript:;">'+_list.fileName+'</a></div>'); + + // 璁剧疆淇℃伅鍐呭 + videoItem.data('data', _list); + // 璁剧疆琚縺娲荤殑瑙嗛鍚嶇О + if(_list.fileName == acName) { + acIndex = i; + } + + container.append(videoItem); + } + + // 婵�娲昏閫変腑鐨勮棰� + // container.find('.video-item').eq(acIndex).addClass('video-item-active'); + // 璁剧疆鍏ㄥ眬鐨勬鍦ㄦ挱鏀剧殑瑙嗛鐨勫悕绉� + gFileName = list[acIndex].fileName; + + return list[acIndex].fileUrl; + } + + + // 鏈烘埧鐜鍥剧墖闆嗘ā鍧� + var imgCarouselopts = { + elem: '#imgCarousel', + arrow: 'always', + width: '100%', + height: '100%', + autoplay: false + }; + + //甯歌杞挱 + var homeEnvImgs = carousel.render(imgCarouselopts); + var imgsInfo = $('#imgInfoTbl'); + var uploadImgsLoad; + var uploadImgs = upload.render({ + elem: '#addImgs' + ,url: 'MyFileAction!uploadStationFile' + ,accept: 'image' + ,multiple: true + ,data: { + json:JSON.stringify( { + StationId: sid, + VideoOrImage: 'image' + }) + } + ,auto: false + ,bindAction: '#uploadImgs' + ,choose: function(obj){ + var files = this.files = obj.pushFile(); + imgsInfo.text(''); + //璇诲彇鏈湴鏂囦欢 + obj.preview(function(index, file, result){ + var tr = $(['<tr id="upload-'+ index +'">' + ,'<td><img src="'+result+'">' + ,'<td>'+ file.name +'</td>' + ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>' + ,'<td>' + ,'<button class="layui-btn layui-btn-xs imgs-reload layui-hide">閲嶄紶</button>' + ,'<button class="layui-btn layui-btn-xs layui-btn-danger imgs-delete">鍒犻櫎</button>' + ,'</td>' + ,'</tr>'].join('')); + + //鍗曚釜閲嶄紶 + tr.find('.imgs-reload').on('click', function(){ + obj.upload(index, file); + }); + + //鍒犻櫎 + tr.find('.imgs-delete').on('click', function(){ + delete files[index]; //鍒犻櫎瀵瑰簲鐨勬枃浠� + tr.remove(); + uploadImgs.config.elem.next()[0].value = ''; //娓呯┖ input file 鍊硷紝浠ュ厤鍒犻櫎鍚庡嚭鐜板悓鍚嶆枃浠朵笉鍙�� + }); + + imgsInfo.append(tr); + }); + } + ,before:function() { + uploadImgsLoad = layer.load(1); + } + ,done:function(res) { + var rs = JSON.parse(res.result); + if(rs.code == 1) { + layer.msg('涓婁紶鎴愬姛锛�'); + searchCarouselImgs(sid, homeEnvImgs, imgCarouselopts, imgsContainer); + }else { + layer.msg('涓婁紶澶辫触锛�'); + } + layer.close(uploadImgsLoad); + } + }); + + // 鏌ヨ杞挱鍥捐祫婧� + var imgsContainer = $('#carouselItems'); + searchCarouselImgs(sid, 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