~whychwj/haha.git

			@@ -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){ }}
			@@ -106,7 +111,7 @@
			</tbody>
			</table>
			</div>
			{{# }else{ }}
			{{# }else if(item.type == 'home'){ }}
			<div class="layui-tab-item {{ item.cshow }}">
			<table class="hdw-tbl">
			<thead>
			@@ -271,19 +276,130 @@
			</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-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>
			</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', //容器的ID或className
			variable: 'player', //播放函数名称
			loop: false, //播放结束是否循环播放
			autoplay: false,//是否自动播放
			//poster: 'material/poster.jpg', //封面图片
			preview: {},
			drag: 'start', //拖动的属性
			video: [
			['', 'video/mp4']
			]
			};

			var player;
			element.on('tab(homeInfoTab)', function(data){
			if(!player) {
			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' //视频
			,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', '上传成功！');
			}
			}
			});

			// 根据指定格式data的值更新tab的内容
			function updatehomeInfoTab(data) {
			laytpl(tabTpl).render(data, function(html) {
			@@ -291,6 +407,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>