From 0ac46331c1829fbca7cc1873f8d143de2e5feee9 Mon Sep 17 00:00:00 2001
From: hdw <496960745@qq.com>
Date: 星期二, 20 十一月 2018 09:59:39 +0800
Subject: [PATCH] 修改内容
---
gx_tieta/WebRoot/iframe/homeinfo.html | 252 +++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 247 insertions(+), 5 deletions(-)
diff --git a/gx_tieta/WebRoot/iframe/homeinfo.html b/gx_tieta/WebRoot/iframe/homeinfo.html
index 975c99c..4872a8b 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;
@@ -18,6 +19,9 @@
}
body.homeinfo-tab .layui-tab-content {
padding: 0;
+ }
+ body.homeinfo-tab .layui-tab-content .layui-tab-item.layui-show {
+ height: 100%;
}
</style>
</head>
@@ -29,6 +33,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 +44,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 +108,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 +280,175 @@
</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 video-slideHide">
+ <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>
+ <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>
+ {{# } }}
+
{{# }); }}
</div>
</script>
<script>
- layui.use(['element', 'laytpl'], function() {
+ layui.use(['element', 'laytpl', 'upload'], function() {
var element = layui.element;
var laytpl = layui.laytpl;
+ var upload = layui.upload;
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
+ })
+ }
+ ,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 +456,83 @@
element.render('tab', 'homeInfoTab');
});
}
+
+
+
+ // 鑾峰彇瑙嗛鍒楄〃
+ function getVideoList(sid, fileName,update) {
+ var tmp = {
+ StationId: sid,
+ StationName: '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);
+ 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;
+ }
});
</script>
</body>
--
Gitblit v1.9.1