From 2fe250ece8de95b3f70172fe5b45793ab6a3084a Mon Sep 17 00:00:00 2001
From: D:/workspace/chenjingjing/git/gx_tieta/gx_tieta/.gitignore <chenjingjing@LAPTOP-E51P2139>
Date: 星期五, 18 一月 2019 17:30:50 +0800
Subject: [PATCH] 未审批可更改
---
gx_tieta/WebRoot/iframe/homeinfo.html | 341 +++++++++++++++++++++++++++++++++++++++++++++++++++++---
1 files changed, 319 insertions(+), 22 deletions(-)
diff --git a/gx_tieta/WebRoot/iframe/homeinfo.html b/gx_tieta/WebRoot/iframe/homeinfo.html
index abe495d..015315b 100644
--- a/gx_tieta/WebRoot/iframe/homeinfo.html
+++ b/gx_tieta/WebRoot/iframe/homeinfo.html
@@ -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">
@@ -44,7 +55,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>
@@ -108,12 +119,16 @@
<td>璐熻矗浜�</td>
<td>{{ item.content.person }}</td>
</tr>
+ <tr>
+ <td>瀹夎浜哄憳</td>
+ <td>{{ item.content.install_user }}</td>
+ </tr>
</tbody>
</table>
</div>
{{# }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>
@@ -277,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">
@@ -297,33 +312,90 @@
<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 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 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>
+ {{# }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 class="bottom-btn">
- <button type="button" class="layui-btn layui-btn-normal" id="upload">纭涓婁紶</button>
+ </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>
+ {{# }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);
// 閲嶆柊娓叉煋
@@ -345,7 +417,9 @@
var player;
element.on('tab(homeInfoTab)', function(data){
- if(!player) {
+ var playerName = '鍩虹珯鐜鐭棰�';
+ var tabTxt = $(this).text();
+ if(!player && tabTxt == playerName) {
player = new ckplayer(videoObject);
}
});
@@ -385,10 +459,38 @@
,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);
+ 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 + '%');
}
@@ -396,6 +498,7 @@
var rs = JSON.parse(res.result);
if(rs.code == 1) {
element.progress('uploadProgress', '涓婁紶鎴愬姛锛�');
+ getVideoList(sid, gFileName, true);
}
}
});
@@ -411,10 +514,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');
// 璇锋眰瑙嗛鎾斁鍒楄〃
@@ -426,6 +529,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 = [];
@@ -441,7 +545,7 @@
var videoUrl = createVideosList(videoContainer, rsList, fileName);
// 鏄惁鏇存柊瑙嗛鍒楄〃
if(update) {
-
+
}else{
videoObject.video = [[videoUrl, 'video/mp4']];
}
@@ -478,12 +582,205 @@
}
// 婵�娲昏閫変腑鐨勮棰�
- container.find('.video-item').eq(acIndex).addClass('video-item-active');
+ // 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);
+ }
+
+ // 鏈烘埧鍦板浘妯″潡
+ 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('鑾峰彇鏈烘埧淇℃伅澶辫触');
+ }
+ }
+
+ // 鑾峰彇鎸囧畾鐨則abC鍐呭
+ 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>
--
Gitblit v1.9.1