~whychwj/haha.git

			@@ -9,7 +9,11 @@
			<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">
			<link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css">
			<!-- 导入百度地图API -->
			<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
			<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=QAerSFEiGDCx1oHPB7Z5XYcBHI6R3qwx"></script>
			<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
			<style>
			body.homeinfo-tab .layui-tab {
			margin: 0;
			@@ -23,6 +27,13 @@
			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">
			@@ -281,9 +292,9 @@
			</table>
			</div>
			{{# }else if(item.type == 'env'){ }}
			<div class="layui-tab-item">
			<div class="layui-tab-item {{ item.cshow }}">
			<div id="video" style="width: 100%;height: 100%;"></div>
			<div id="videos" class="video-list video-slideHide">
			<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">
			@@ -301,10 +312,8 @@
			<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>
			<button type="button" class="layui-btn" id="test5"><i class="layui-icon"> </i>视频选择</button>
			<span style="color: #FF0000;">请上传有关机房的视频</span>
			</div>
			</div>
			<div class="layui-upload">
			@@ -329,20 +338,61 @@
			</div>
			</div>
			</div>
			{{# }else if(item.type == 'envImg'){ }}
			<div class="layui-tab-item {{ item.cshow }}">
			<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;">请上传电话卡、机房名称、电池型号、负载电流、bts设备接线、电流接线、整体安装效果图等图片</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>
			{{# }else if(item.type=='homeMap'){ }}
			<div class="layui-tab-item {{ item.cshow }}">
			<div id="BMap" style="width: 100%; height: 100%;"></div>
			</div>
			{{# } }}

			{{# }); }}
			</div>
			</script>
			<script>
			layui.use(['element', 'laytpl', 'upload'], 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);
			console.log(homeInfo);
			updatehomeInfoTab(homeInfo);

			// 重新渲染
			@@ -406,19 +456,20 @@
			,number: 1
			,data: {
			json:JSON.stringify( {
			StationId: sid
			StationId: sid,
			VideoOrImage: 'video'
			})
			}
			,exts: 'mp4\|MOV\|avi\|rmvb'
			,accept: 'video' //视频
			,choose: function(obj) {

			var files = this.files = obj.pushFile();
			console.log(files);
			//console.log(files);
			videoInfoTbl.text('');
			// 遍历
			Object.keys(files).forEach(function(key) {
			var file = files[key];
			console.log(file);
			//console.log(file);
			var tr = $(['<tr id="upload-'+ key +'">'
			,'<td>'+ file.name +'</td>'
			,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
			@@ -460,10 +511,10 @@


			// 获取视频列表
			function getVideoList(sid, fileName,update) {
			function getVideoList(sid, fileName, update) {
			var tmp = {
			StationId: sid,
			StationName: 'video'
			VideoOrImage: 'video'
			};
			var videoContainer = $('#videos .video-list-content');
			// 请求视频播放列表
			@@ -475,6 +526,7 @@
			dataType: 'json',
			success: function(result) {
			var rs = JSON.parse(result.result);
			//console.log(rs);
			if(rs.code==1) {
			var data = rs.data;
			var rsList = [];
			@@ -492,7 +544,7 @@
			if(update) {

			}else{
			//videoObject.video = [[videoUrl, 'video/mp4']];
			videoObject.video = [[videoUrl, 'video/mp4']];
			}
			}else {
			createVideosList(videoContainer, [], fileName);
			@@ -533,6 +585,199 @@

			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);
			}

			// 机房地图模块
			var bMap = $('#BMap');
			// 判断地图容器是否存在
			if(bMap.length != 0) {
			// 创建地图
			let map = createMap();
			// 生成地图图标
			createMapPoint(map);
			}

			// 生成地图
			function createMap() {
			let map = new BMap.Map('BMap');
			var point = new BMap.Point(125.3192,43.8090);
			map.centerAndZoom(point, 11); // 用城市名设置地图中心点
			map.enableScrollWheelZoom();
			map.disableDoubleClickZoom();
			// 添加地图类型控件
			map.addControl(new BMap.MapTypeControl());
			// 给地图添加工具条(地图-卫星-三维)和比例尺控件
			let bottom_left_control = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
			map.addControl(bottom_left_control); // 添加比例尺到地图

			return map;
			}

			// 生成地图图标并移动到中心位置
			function createMapPoint(map) {
			var homeData = getTabCItem('homeMap', homeInfo.tabc);
			// 判断是否获取到了
			if(homeData.code == 1) {
			console.log(homeData);
			var point = new BMap.Point(homeData.data.lng, homeData.data.lat);
			var mk = new BMap.Marker(point);
			var label = new BMap.Label("新机房",{offset:new BMap.Size(20,-10)});
			label.setStyle({display: 'none', padding: '4px 2px'});
			mk.disableDragging(); // 设置不可拖动
			map.addOverlay(mk); // 将覆盖物添加到地图中
			mk.setLabel(label); // 给覆盖物添加label提示
			map.panTo(point); // 将地图移动到添加的点位置
			map.setZoom(20); // 设置地图的缩放等级
			}else {
			layer.msg('获取机房信息失败');
			}
			}

			// 获取指定的tabC内容
			function getTabCItem(type, tabs) {
			let rs = {
			code: 0
			,data: {}
			,msg: '未检测到信息'
			};
			// 遍历tabs
			for(let i=0; i<tabs.length;i++) {
			let _tab = tabs[i];
			if(_tab.type == type) {
			rs.code = 1;
			rs.data = _tab;
			rs.msg = '获取成功' ;
			break;
			}
			}

			return rs;
			}

			});
			</script>
			</body>